Locally scoped CSS
Now it is time to create our app, which will consist of a simple button of the same sort we used in previous examples. We will use it to show all the features of the CSS modules.
Let’s update the src/index.tsx file, which is the entry we specified in the Webpack configuration:
import { createRoot } from 'react-dom/client'
We can then create a simple button. As usual, we are going to start with a non-styled button, and we will add the styles step by step:
const Button = () => <button>Click me!</button>
Finally, we can render the button into the DOM:
createRoot(document.getElementById('root') as HTMLElement).render(<Button />)
Now, suppose we want to apply some styles to the button – a background color, size, and so on. We create a regular CSS file, called index.css, and we put the following class into it:
.button {
background-color: #ff0000;
width: 320px;
padding: 20px...