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.

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

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.

Answer 3

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.

Answer 4

/* loginScreen.js */

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

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

      </div>
    );
  }
}

export default loginScreen;

Answer 5

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

Answer 6

try this:

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