CODEWITHSUNDEEP
javascriptreactjsmaterial-uireact-domreact-css-modules
Bhuvan Gandhi
Bhuvan Gandhi

Reputation: 177

CSS module is not working in react 16.13.1

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.

Upvotes: 0

Views: 4244

Answers (3)

Dream Echo
Dream Echo

Reputation: 197

CSS module is included in react all you have to do is building a file with the correct name like "example.module.css" and import it with the correct path if it's in the same folder `import tst from 'example.module.css' or whatever path it is in, you can replace "tst" with any any name you like. and then you can use it in className like

<button className={tst.buttonPrimary}>Submit /button>

this video can help you more: https://www.youtube.com/watch?v=Udf951dyTdU

Upvotes: 2

Hasan Houry
Hasan Houry

Reputation: 11

first : open your terminal and run "npm install css-loader style-loader --save-dev" These loaders enable Webpack to bundle CSS files Second: in your webpack.config.js file, add the new loaders for interpreting CSS files:

module.exports = {
  ...
  module: {
    rules: [
      ...
      *///

 {
         test: /\.css$/i,
         exclude: /node_modules/,
         use: [
           'style-loader',
           {
             loader: 'css-loader',
             options: {
               modules: true,
             },
           },
         ],
       },

   *////
    ],
  },
  ...
};

Upvotes: 1

Fide
Fide

Reputation: 1197

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

Upvotes: 1

Related Questions