CSS modules importing doesn't work despite the righ compilation

Question

I've got a problem with importing css modules to react component.

import React from 'react'
import styles from '../App.css'

const Button = () => (
    ... className={styles.button}...
)

export default Button;

There is no compilation error and stuff like that. Everything seems to by right, but when I run server button looks by default as with no css.

romadryud romadryud · Accepted Answer · 2020-09-19T15:26:48

You need to use Module css must have name App.module.css

Then import

import React from 'react';
import styles from './App.module.css';

And use className={styles.button}