CSS class selector styles not being applied in React Project

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>

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

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.