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