ClassName styles not working in react

Question

I'm having a little issue with styling react components. I have my scss stylesheets in a separate file and importing them into my react file. My scss stylsheet looks like this:

.testStyle {
  font-family: avenir;
  color: blue;
}

My react file, looks like this:

import React from 'react'

import styles from '../styles/main.scss'

class Temp extends React.Component {
  render() {
    return (
      **<div className={styles.testStyle}>**
        <h1>Hello</h1>
      </div>
    )
  }
}

export default Temp

With this setup, my styles are not passed through, however, if it works if I replace the starred line with <div className='testStyle'>, so it seems like the styles are being imported correctly. Can anyone help with this? Thanks.

hows your webpack config looking? ave you added sass-loader,style-loader, If in dev mode have you included generated css file into your html? — Sreevisakh
– Sreevisakh, Commented Jun 23, 2017 at 11:43

Roman Nguyen · Accepted Answer · 2018-04-25 09:02:44Z

17

I assume you are using css loader in your webpack. You need to enable modules:true

{
  loader: 'css-loader',
  options: { 
    modules: true
  }
}

If you don't want this behaviour to be default, in your (s)css you can use:

// sCSS
:local .yourClass {...}

// JS

import cls from '../yourCss.scss'

const Component = () => (
  <div className={cls.yourClass} />
)

// yourClass will become some random hash
// or something else based on your css loader config

to have it processed. If you have modules: true and you don't want css loader to compile your class, you can use

// CSS
:global .yourGlobalClass {...}

// JS
import '../yourCss.scss'

const Component = () => (
  <div className="yourGlobalClass" />
)

See the documentation: https://github.com/webpack-contrib/css-loader and https://github.com/css-modules/css-modules

edited Apr 25, 2018 at 9:02

answered Apr 25, 2018 at 8:57

Roman Nguyen

1711 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

YanivGK · Accepted Answer · 2019-09-16 12:51:04Z

9

Try to rename the .scss filename extension to .module.scss

If there's a problem in the sass-loader or you didn't configure it to support .scss files - it's original scss format will support only the .module.scss extension.

I had the same problem and it fixed my issue.

You can also check here the question I've asked of it.

answered Sep 16, 2019 at 12:51

YanivGK

91312 silver badges18 bronze badges

2 Comments

VSO Over a year ago

Was my problem, ty!

MADHUR GUPTA Over a year ago

<div className={style['game']}> this si not working and scss is working fine .. can u help me

Ragab Mohamad · Accepted Answer · 2023-04-17 12:09:51Z

4

Some of Steps will Solve your Problem

The Name Of File Must Be : FileName.module.css

Import File in App.js

Used it in Component

Browser

answered Apr 17, 2023 at 12:09

Ragab Mohamad

7375 silver badges6 bronze badges

Comments

erik-sn · Accepted Answer · 2016-10-07 22:18:00Z

2

Importing a stylesheet will simply tell Webpack or other build tools to process that stylesheet and include it in the output files. It does not, as far as I know, allow you to template JSX with it. So just by importing it your styles will be available after a build cycle takes place. You don't need to actually use it in any way.

className takes a string and directly translates to html class - so use it like that.

answered Oct 7, 2016 at 22:18

erik-sn

2,6001 gold badge23 silver badges39 bronze badges

2 Comments

Pmmoks Over a year ago

I am using webpack style and css loaders so it should allow me to require/import my styles straight into my jsx and handle the build steps.

johnwick0831 Over a year ago

hi @pmmoks - i have the same problem, how did you fix it?

anson · Accepted Answer · 2019-08-27 06:36:23Z

2

/* loginScreen.js */

import React, { Component } from 'react';
import './styles.css'

class loginScreen extends Component {
  render() {
    return (
      <div className={ 'form' }>

      </div>
    );
  }
}

export default loginScreen;

edited Aug 27, 2019 at 6:36

answered Aug 27, 2019 at 4:48

anson

1,51216 silver badges20 bronze badges

Comments

Muhammad Adeel · Accepted Answer · 2018-04-25 08:57:19Z

1

You might have the sass-loader missing in your webpack configuration. For that please check here,

My recommendation is to drop sass and use postcss, it's extensive and works the way your are using classes in your code above.

For a postcss install and config check here

answered Apr 25, 2018 at 8:57

Muhammad Adeel

2,8841 gold badge24 silver badges18 bronze badges

Comments

freetrade7 · Accepted Answer · 2021-10-13 07:41:19Z

-1

try this:

import * as styles from '../styles/main.scss'

answered Oct 13, 2021 at 7:41

freetrade7

1

1 Comment

Fabian S. Over a year ago

Hi and welcome to SO. Please add some explanation on how this answer fixed the problem and how its different from the other answers (and most important the accepted answer).

Collectives™ on Stack Overflow

ClassName styles not working in react

7 Answers 7

Comments

2 Comments

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

2 Comments

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related