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 - 所以就这样使用它。

Answer 4

您的webpack配置中可能缺少sass-loader 。 为此，请点击这里 ，

我的建议是删除sass并使用postcss ，它是广泛的，并且在你上面的代码中使用类的方式。

对于postcss安装和配置检查这里

Answer 5

/* loginScreen.js */

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

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

      </div>
    );
  }
}

export default loginScreen;

Answer 6

尝试这个：

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

Answer 7

我相信，这可能与某些Webpack配置是“散列”类的事实有关，因此您的代码应该如下所示：

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>
    )
  }
}

看看这是否有帮助。