ClassName样式不起作用

Question

我对造型反应组件有一点问题.我将scss样式表放在一个单独的文件中,并将它们导入到我的react文件中.我的scss样式表看起来像这样:

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

我的反应文件,如下所示:

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

使用此设置,我的样式不会通过,但是,如果我用替换星号行,它会起作用<div className='testStyle'>,所以看起来样式正在正确导入.有人能帮忙吗？谢谢.

Answer 1

我假设你在webpack中使用css loader.您需要启用模块:true

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

如果您不希望此行为成为默认行为,则可以在(s)css中使用:

// 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

处理它.如果你有模块:true并且你不希望css loader编译你的类,你可以使用

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

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

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

请参阅文档:https://github.com/webpack-contrib/css-loader和https://github.com/css-modules/css-modules

Answer 2

尝试将.scss文件扩展名重命名为.module.scss

如果存在问题，sass-loader或者您没有将其配置为支持.scss文件 - 它的原始scss格式将仅支持.module.scss扩展名。

我遇到了同样的问题，它解决了我的问题。

你也可以在这里查看我问过的问题。

Answer 3

导入样式表只会告诉 Webpack 或其他构建工具处理该样式表并将其包含在输出文件中。据我所知，它不允许您使用它来模板化 JSX。因此，只需导入它，您的样式就会在构建周期发生后可用。您不需要以任何方式实际使用它。

className接受一个字符串并直接转换为 html class- 所以像这样使用它。