Saltar al contenido

Cómo utilizar módulos css en react.jsOct, 11thIn este tutorial, vamos a aprender acerca de cómo utilizar los módulos css …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo utilizar los módulos de css en aplicaciones reaccionar con la ayuda de ejemplos.

¿Cuál es el módulo CSS? Módulo CSS

A es un archivo CSS que contiene todos los nombres de las clases y los nombres están en el ámbito de la animación por defecto significa que los estilos se aplican solamente al componente en particular.

Nos puede importar módulos css al igual que los módulos de JavaScript y acceder a los nombres de clase como una propiedad de objeto. módulos CSS

resuelven el problema de conflicto de nombres al crear automáticamente un nombre de clase única del formato de [nombre de archivo] \ _ [nombre de la clase] \ _ \ _ [picadillo].

Configuración de reaccionar aplicación

Vamos a crear la nueva reaccionar aplicación utilizando el siguiente comando.

npx create-react-app react-cssmodules

La reaccionar aplicaciones que hemos creado el uso de crear una reacción aplicación son ya viene con soporte CSS-módulos.

módulos usando CSS

Ahora abre reaccionar-cssmodules carpeta en el editor de código favorito y navegar a la carpeta src y luego eliminar el archivo App.css. módulos de utilizar CSS

a la primera que necesitan para crear una Vamos a crear un nuevo módulo denominado CSS App.module.cssand añadir el siguiente nombres de clase.

.container{
width: 500px;
margin:1rem auto;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.795);
padding: 1rem;
}

.heading{
font-weight: 600;
background-color: aliceblue;
color: blue;
}

Nota: module.css es una convención de nomenclatura para los módulos css

Ahora vamos a utilizar nuestro módulo CSS dentro del componente de aplicaciones mediante la importación.

import React from 'react';
import styles from './App.module.css';
function App() {
return (

Hello react

);
}

export default App;

En el código anterior en primer lugar, que importó el archivo como un App.module.css estilos y accede nuestros nombres de clases CSS como una propiedad de objeto dentro JSX.

Ahora ejecutar el servidor de dev desde NPM empezar, si abre sus herramientas del navegador dev se pueden ver los nombres de clases únicas que son generados por los módulos de css.

has visto los nombres de las clases son únicos para que no nos dieron ningún nombre choque?

Composición en módulos css módulos css

, nos puede componer nombres de clase de otros selectores CSS.

Veamos un ejemplo.

.container{
width: 500px;
margin:1rem auto;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.795);
padding: 1rem;
}

.bg-color{
background-color: aliceblue;
}

.heading{
composes: bg-color ; color: black;
font-weight: 600;
}

Aquí hemos utilizado selector de bg-color dentro de la rúbrica de selección utilizando la propiedad Compone.

Cuando un nombre de clase compone desde otro nombre de la clase de los módulos css añaden dos nombres de clase a su elemento html.

Hello react

Uso de la composición antes de que sus reglas CSS.

También puede componer múltiples nombres de las clases con Compone propiedad como esta Compone: classname2 classname1.

Composición de otros módulos css

También podemos componer nuestros selectores CSS de otros módulos css.

Ejemplo:

En el archivo index.css añadir el siguiente nombre de la clase.

.heading{
font-weight: 600;
background-color: aliceblue;
color:rebeccapurple;
}

Ahora en su archivo App.module.css, podemos usar esta partida.

.container{
width: 500px;
margin:1rem auto;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.795);
padding: 1rem;
}

.bg-color{
background-color: aliceblue;
}

.heading{
composes: heading from './index.css'; color: black;
}