Importing css classes into React Component
-
Hi all, I have a
, i have imported the css files where these classes exist into my project with a statement
import style from '../css/styles.css'
In my react component when I am trying to reference this div as below in my React component:
it is throwing a compiled error for me:
./src/components/FooterMenu.jsx
Line 25: 'outer' is not defined no-undef
Line 25: 'fluid' is not defined no-undef
Line 26: 'outer' is not defined no-undefSearch for the keywords to learn more about each error.
What is the option to avoid these errors? Like what is the way I can reference css classes which have - in them using import reference? i have tried the following way also, but it didn't work:
-
Hi all, I have a
, i have imported the css files where these classes exist into my project with a statement
import style from '../css/styles.css'
In my react component when I am trying to reference this div as below in my React component:
it is throwing a compiled error for me:
./src/components/FooterMenu.jsx
Line 25: 'outer' is not defined no-undef
Line 25: 'fluid' is not defined no-undef
Line 26: 'outer' is not defined no-undefSearch for the keywords to learn more about each error.
What is the option to avoid these errors? Like what is the way I can reference css classes which have - in them using import reference? i have tried the following way also, but it didn't work:
footer-outeris not a valid Javascript identifier. It will be interpreted as(styles.footer) - outer, where the variableouterhas not been defined. I've not used React, but it looks like the CSS loader has an option to convert "kebab-case" class names to "camelCase" identifiers: GitHub - webpack-contrib/css-loader: CSS Loader[^] That should let you use:{style.footerOuter + ' ' + style.containerFluid}
If that doesn't work, try using the indexer on the
styleobject:{style['footer-outer'] + ' ' + style['container-fluid']}
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
footer-outeris not a valid Javascript identifier. It will be interpreted as(styles.footer) - outer, where the variableouterhas not been defined. I've not used React, but it looks like the CSS loader has an option to convert "kebab-case" class names to "camelCase" identifiers: GitHub - webpack-contrib/css-loader: CSS Loader[^] That should let you use:{style.footerOuter + ' ' + style.containerFluid}
If that doesn't work, try using the indexer on the
styleobject:{style['footer-outer'] + ' ' + style['container-fluid']}
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Wonderful, it did work, thanks a lot Richard.
-
footer-outeris not a valid Javascript identifier. It will be interpreted as(styles.footer) - outer, where the variableouterhas not been defined. I've not used React, but it looks like the CSS loader has an option to convert "kebab-case" class names to "camelCase" identifiers: GitHub - webpack-contrib/css-loader: CSS Loader[^] That should let you use:{style.footerOuter + ' ' + style.containerFluid}
If that doesn't work, try using the indexer on the
styleobject:{style['footer-outer'] + ' ' + style['container-fluid']}
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
