Direct Usage of ClassName not working in React

user_3024251 0
Viewed 472

I am not understanding a issue here in CSS. In my project I have a case.

I tried to import CSS directly from one of my file like below

import './styles.css'

and tried to use like this and its not working

<div className = 'home'><div>

but when I changed the approach like this , its working

import stat from './styles.css'

usage

<div className = {stat['home']}></div>

Could you please let me know why this is happening. Is this something related to the configuration. What should I do for the direct import

Thanks in advance.

webpack-style-loader css-loader webpack reactjs css
1 Answers

Without looking into your project configuration, I can only provide a guess. Your project is probably set up to use CSS modules. Essentially your bundler treats *.css files as JS modules so you can import the classes out of them. It is usually a good thing though! CSS modules come with benefits such as automatic class names generation. It allows you not to worry about class name collisions.

If the project is using Webpack, see if the css-loader is configured to enable modules. You can use this part of the Webpack doc as a reference.

user_46629330
Related