CODEWITHSUNDEEP
cssreactjswebpackcss-loaderwebpack-style-loader
Krishna
Krishna

Reputation: 1362

Direct Usage of ClassName not working in React

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.

Upvotes: 2

Views: 1794

Answers (1)

Jackyef
Jackyef

Reputation: 5002

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.

Upvotes: 1

Related Questions