ClassName 样式在反应中不起作用答案

【问题标题】：ClassName styles not working in reactClassName 样式在反应中不起作用
【发布时间】：2017-02-16 23:58:42
【问题描述】：

我在设置 React 组件的样式时遇到了一点问题。我将我的 scss 样式表放在一个单独的文件中，并将它们导入到我的反应文件中。我的 scss 样式表如下所示：

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

我的 react 文件，如下所示：

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'> 可以正常工作，那么看起来样式正在正确导入。有人能帮忙吗？谢谢。

【问题讨论】：

你的 webpack 配置看起来怎么样？你添加了 sass-loader,style-loader, 如果在开发模式下你是否将生成的 css 文件包含到你的 html 中？

标签： javascript reactjs sass

【解决方案1】：

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

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

【讨论】：

我正在使用 webpack 样式和 css 加载器，因此它应该允许我将我的样式直接导入我的 jsx 并处理构建步骤。
嗨@pmmoks - 我有同样的问题，你是怎么解决的？

【解决方案2】：

您的 webpack 配置中可能缺少 sass-loader。为此请check here,

我的建议是放弃 sass 并使用 postcss，它很广泛，并且可以按照您在上面的代码中使用类的方式工作。

对于 postcss 安装和配置 check here

【讨论】：

【解决方案3】：

我假设你在你的 webpack 中使用 css 加载器。您需要启用模块：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

处理它。如果你有 modules: 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

【讨论】：

【解决方案4】：

/* loginScreen.js */

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

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

      </div>
    );
  }
}

export default loginScreen;

【讨论】：

【解决方案5】：

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

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

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

您也可以查看here我提出的问题。

【讨论】：

是我的问题，你！
这个 si 不工作而 scss 工作正常.. 你能帮帮我吗

【解决方案6】：

试试这个：

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

【讨论】：

您好，欢迎来到 SO。请添加一些说明，说明此答案如何解决问题以及它与其他答案有何不同（最重要的是已接受的答案）。