es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Hay alguna otra forma de asignar un nombre de id o clase al usar CSS Modules en React?

05 Aug, 2023 Programación

Siempre que importe “style.module.css”, tengo que darle a cada componente un nombre de clase de esta manera: classname={styles.className}

Ejemplo de código:

import styles from './Header.module.scss'

const Header = () => {
    return(
        <div className={styles.Container}>
            <h1 className={styles.PageTitle}>Esto es el encabezado</h1>
        </div>
    );
}

export default Header;

¿Existe una forma más conveniente que escribir classname={styles.className}?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, puedes utilizar la función de CSS Modules del paquete classnames para generar valores de className basados en el objeto de estilos importado. Este enfoque elimina la necesidad de especificar manualmente los valores de className para los componentes individuales. Aquí tienes un ejemplo de código utilizando classnames:

    import styles from './Header.module.scss';
import classNames from 'classnames/bind';

const cx = classNames.bind(styles);

const Header = () => {
  return (
    <div classname="{cx('Container')}">
      <h1 classname="{cx('PageTitle')}">Este es el encabezado</h1>
    </div>
  );
}

export default Header;

    En este ejemplo, primero importamos el objeto de estilos desde el archivo Header.module.scss. Luego creamos una versión enlazada de la función classNames utilizando el método bind, pasando el objeto de estilos importado como argumento. Esto crea una función que podemos utilizar para generar valores de className basados en el objeto de estilos.

    En el código JSX, utilizamos la función cx para generar valores de className para cada componente, pasando el nombre de la clase CSS como argumento. La función cx combina el objeto de estilos importado con el nombre de clase especificado para producir una cadena de nombres de clase que pueden utilizarse como valor de className para el componente.

Comments are closed.