Issue
I've read that the CSS-spec does not specify case-sensitivity, which has led to some browsers treating, for example, .myheader
as equal to .myHeader
. But since the standard in Javascript is to write variables in camelcase, how do I reconcile these two when using CSS-in-JS?
My React code could look like this:
import style from './style.module.css'
//...
<Button className={style.myButton} />
And the CSS would then break casing-convention:
.myButton {
background-color: blue;
}
OR my React code could look like this (which is kinda ugly):
import style from './style.module.css'
//...
<Button className={style['my-button']} />
And the CSS would then follow the kebab-case convention:
.my-button {
background-color: blue;
}
Solution
In React first one always works in case of modules, so you do not need to worry about it. So, going with the below convention works fine.
React:
import style from './style.module.css'
//...
<Button className={style.myButton} />
CSS
.myButton {
background-color: blue;
}
Refer to this Medium link for more insight: CSS in JS
Answered By - Imran Rafiq Rather