Poursuite de l'étude de la stylisation avec les modules CSS React

Continuons à travailler sur notre application buttons. Occupons-nous maintenant du composant principal App, qui avait déjà été généré initialement dans le dossier src. Il contiendra deux divs, un titre et un bouton.

Renommons le fichier App.css en App.module.css selon la convention, videons-le et créons-y plusieurs classes avec des styles CSS pour les balises :

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

Maintenant, vidons le contenu du fichier App.js. Ensuite, importons le composant React Buttons et les styles depuis App.module.css. Écrivons nos balises et appliquons-leur les styles, et plaçons également le composant React Buttons :

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

Nous avons utilisé le mot classes pour le nom de l'objet contenant les styles, que nous importons depuis App.module.css. Comme dans le cas précédent, vous pouvez nommer cet objet comme bon vous semble.

Il reste quelques petites étapes. Changeons le nom du fichier index.css selon la convention en index.module.css et dans le fichier index.js n'oublions pas de remplacer la ligne d'importation :

import "./index.css";

Par la ligne :

import "./index.module.css";

Maintenant, nous pouvons voir dans le navigateur le résultat du travail de notre application.

Si vous ouvrez le code HTML généré dans le panneau de développement du navigateur, vous verrez que chaque composant possède ses propres classes uniques. Ainsi, nous n'avons plus à nous soucier des conflits entre les classes des différents composants.

Il est également important que les modules CSS n'interdisent pas l'importation de fichiers CSS externes classiques.

En suivant la théorie de la leçon, videz le composant React App de votre application inputs, que vous avez créée dans les tâches de la leçon précédente, et placez-y votre composant Inputs dans un div stylisé. Ajoutez dans App un titre stylisé. Placez le tout dans un autre div. Écrivez les styles pour les balises du composant React App dans App.modules.css.

Assemblez le tout, connectez correctement les fichiers restants et lancez votre application inputs.