Javascript 类名称样式在react中不起作用

我对react组件的样式设计有点问题。我将我的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

我的react文件如下所示：

.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

从“React”导入React
从“../styles/main.scss”导入样式
类Temp扩展了React.Component{
render（）{
返回(
****
你好
)
}
}
导出默认温度

---

使用此设置，我的样式不会被传递，但是，如果我用

替换带星号的行有效，则样式似乎被正确导入。有人能帮忙吗？谢谢。

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

className

获取一个字符串，并直接转换为html

class

——因此请这样使用它。

您的网页包配置中可能缺少sass加载程序。为此，请

我的建议是放弃sass并使用postss，它非常广泛，并且与您在上面代码中使用类的方式相同

---

对于postcss安装和配置，我假设您在您的网页包中使用css加载程序。 您需要启用模块：true

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

如果您不希望此行为成为默认行为，您可以在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

//sCSS
：local.yourClass{…}
//JS
从“../yourCss.scss”导入cls
常量组件=（）=>(
)
//您的类将成为一些随机散列
//或者基于css加载程序配置的其他内容

处理它。如果您有modules:true，并且您不希望css loader编译您的类，那么可以使用

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

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

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

//CSS
：global.yourGlobalClass{…}
//JS
导入“../yourCss.scss”
常量组件=（）=>(
)

请参阅文档：和

/*loginScreen.js*/
从“React”导入React，{Component}；
导入“./styles.css”
类loginScreen扩展组件{
render（）{
返回(
);
}
}
导出默认登录屏幕；

尝试将

.scss

文件扩展名重命名为

.module.scss

如果

sass加载程序出现问题，或者您没有将其配置为支持
.scss
文件-它的原始
scss
格式将仅支持
.module.scss
扩展名

我也有同样的问题，它解决了我的问题

你也可以检查我问的问题。
我使用的是网页样式和css加载程序，因此它应该允许我直接要求/导入我的样式到我的jsx中，并处理构建步骤。嗨@pmmoks-我也有同样的问题，你是如何解决的？你的网页配置看起来如何？你是否添加了sass加载程序，样式加载程序，如果在开发模式下，你是否将生成的css文件包含到html中？这是我的问题，泰！该系统不工作，scss工作正常。。你能帮我吗？这个对我有用。