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.

Enriquetaenriquez

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? – Daisey

Answer 1

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

Madriene

Answer 2

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.

Chalco

Was my problem, ty! – Epigrammatist

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

Answer 3

Some of Steps will Solve your Problem

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

2. Import File in App.js

3. Used it in Component

4. Browser

Terence

Answer 4

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.

Shelled

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. – Enriquetaenriquez

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

Answer 5

/* loginScreen.js */

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

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

      </div>
    );
  }
}

export default loginScreen;

Dibbrun

Answer 6

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

Assiduous

Answer 7

try this:

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

Amongst

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). – Malloch