CSS module is not working in react 16.13.1

Question

I want to style components in react JS. I tried several ways to do that. When I try to create a CSS object and apply it to the component in the same JS file, then it is working. But when I try to apply CSS from external CSS file and import it in the JS file then it is not working. And I have also tried to save that file as filename.module.css. But it didn't help me.

The list of installed node modules and their versions is given below.

> @material-ui/[email protected]
> @material-ui/[email protected]
> [email protected]
> [email protected]
> [email protected]
> [email protected]
> [email protected]

In webpack.config.js file of react-script module, I found below code:

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

So I guess my react project is supporting CSS files as well as SCSS and SASS files. Did I understand correctly?

header.module.css file:

.heading {
    color: '#3592EF';
    font-weight: '600';
    letter-spacing: '2px';
}
.navButton {
    color: '#444';
    font-size: '16px';
    padding: '4px 8px';
    margin: 'auto';
    margin-right: '15px';
}

Header.js file:

import React from 'react';
import { Button } from '@material-ui/core';
import styles from './header.module.css';

export default class Header extends React.Component {
    render() {
        return (
            <div>
                <span className={styles.headling}>Heading element</span>
                <Button className={styles.navButton}>Home</Button>
                <Button className={styles.navButton}>About</Button>
            </div>
        );
    }
}

The output is coming with the Heading element and Home, About button. But without CSS style.

How can I solve this issue?

Thank you.

Answer 1

Generally custom components do not accept className prop if it is not propagated to the inner of the component. Looking in the material ui react components Button documentation, this component cannot have className property. https://material-ui.com/components/buttons/ It means, you cannot use it. To convince your self, try to use general html <button> and it will work, you see. Edit: grammar