ClassName styles not working in react

问题:

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.

回答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

回答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.

回答3:

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.

回答4:

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

回答5:

/* loginScreen.js */

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

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

      </div>
    );
  }
}

export default loginScreen;

回答6:

This, I believe, might be related to the fact that some Webpack configs are "hash'ing" the classes, therefore your code should perhaps look like this:

import React from 'react'

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

const selectors = styles as any;

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

See if this helps.