Why CSS Modules styling is not working on my elements, RMWC? - css

Question

I am following the tutorial below on react material web components (RMWC) and got confused with the styling and theming chapters.
https://jamesmfriedman.github.io/rmwc/styling-theming
In this chapter, the author tries to explain differences between using standard CSS and CSS Modules, but I am unable to understand this. What are the differences between the two and why do we use CSS modules and how is it different from standard CSS?
I am also trying to apply CSS using CSS modules, but CSS is not getting applied over the elements. Am I doing something wrong here?
I am using Create-React-App.
My code (style is not getting applied):
index.js
import React from 'react'
import ReactDom from 'react-dom'
import styles from './index.css'
import Button from '#material-ui/core/Button'
class App extends React.Component {
render() {
return (
<div>
<Button className={styles.button}>
CSS Modules
</Button>
</div>
)
}
}
ReactDom.render(<App />, document.getElementById('root'))
index.css
.button {
background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
border-radius: 3px;
border: 0;
color: white;
height: 48px;
padding: 0 30px;
box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3);
}
Even though by doing it in below way , it is working fine.
import React from 'react'
import ReactDom from 'react-dom'
import styles from './index.css'
import Button from '#material-ui/core/Button'
class App extends React.Component {
render() {
return (
<div>
<Button className="button">
CSS Modules
</Button>
</div>
)
}
}
ReactDom.render(<App />, document.getElementById('root'))

Answer 1

Your code is fine except for one small detail you might have missed. Using create-react-app allows you to use css modules if you follow their guidelines. Your file name needs to be index.module.css for it to work as a css module.
Reference:
This project supports CSS Modules alongside regular stylesheets using the [name].module.css file naming convention.

Answer 2

If you think about programming best practice, using global variable is bad.
Because you will run to collision of variable eventually. For worst case, there's no any warn and you're just confused when the value of variable is changed.
In css, sharing class or any selector might help you save time to write css. but eventually you will get some problem (especially in medium-large code base) finding that element is styled by unintentionally class or selector or you want to change style of some element but it affect other element that you don't want.
I suggest you reading this link for further detail.
https://css-tricks.com/css-modules-part-1-need/
for you case, you need to setup babel plugin to use css modules in react
https://github.com/gajus/babel-plugin-react-css-modules
if you create project by create-react-app, you should look at #Keno Clayton 's answer

Answer 3

You can get the answer what different among standart css with css module, when you make more than one page. You will use some css to different page and sometimes you will use same css class name. Same class name will make css overwrite your style. CSS Module comes to fix that problem.