CSS class selector styles not being applied in React Project

Question

Working on a React project using Webpack. Adding some styles in style.css and importing into component with import style from \'./style.css\';. Elements without

Answer 1

If you're like me and use the style attribute for styling then afterwards move them into proper classes in .css files (and wonder why it doesn't work), remember to remove the JSX string format,

height: "100px"

is not the same as

height: 100px

Answer 2

My solution is to rename the css file from:

style.css

to:

style.module.css

Answer 3

Your webpack configuration may be changing the class name depending on its settings. (CSS Modules enabled, though your comment about stylesheet intact implies it's not).

Since you are importing the './style.css' file, try referencing the class name like: style.foo. Ex:

<div className={ style.foo }>foo div</div>

This article: http://javascriptplayground.com/blog/2016/07/css-modules-webpack-react/ describes the pattern of importing and referencing the class name pretty well.

Answer 4

While Kyle's answer works, a better solution would be to rename the css file as style.global.css and import it with import './style.global.css' and specify the class name like normal html. this works better for when you want to append different class names at run time

<div className='foo'>foo div</div>