Continuing to learn styling with CSS modules React

Let's continue working on our application buttons. Now let's work on the main component App, which was already generated in the folder src initially. In it we will have two divs, a header and a button.

Let's replace the file name App.css with App.module.css by convention, clean it up and create several classes in it with CSS styles for the tags:

.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;
}

Now let's clear the contents of the App.js file. Then import the React component Buttons and the styles from App.module.css. Let's write our tags and apply styles to them, and also place the React component 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;

We used the word classes for the name of the object containing the styles that we import from App.module.css. As in the previous case, you can name this object whatever you like.

There are a couple of small steps left. Let's change the name of the file index.css by convention to index.module.css and in the file index.js don't forget to replace the import line:

import "./index.css";

Per line:

import "./index.module.css";

Now we can see the result of our application in the browser.

If you open the generated markup in the developer panel in the browser, you will see that each component has its own unique classes generated. So, we no longer need to worry about conflicts between the classes of individual components.

Another important thing is that CSS modules do not prohibit importing regular external CSS files.

Following the theory from the lesson, clean up the React component App of your inputs application that you created in the tasks for the previous lesson, and also place the Inputs you created in some styled div. Add a styled header to App. Place all of this in some other div. Write styles for the tags of the React component App in App.modules.css.

Put everything together, connect the remaining files correctly and run your inputs application.