What is CSS Modules?

In CSS modules, CSS class names and animation names are scoped locally by default. In React you can use the file naming conversion as [file name].module.css. This let the React and Webpack know that you are using CSS Modules.

Importing the CSS in the file.

import nameyoulike from './name.modules.css';

Calling the style in the file.

<button className={styles.button} />

References

Styled Components Doc