Css 类名不适用于反应组件

Posted 2023-02-22

【中文标题】Css 类名不适用于反应组件

【英文标题】：Css classname not applied to react component

【发布时间】：2018-07-18 10:04:09

【问题描述】：

感谢您的宝贵时间和帮助。我花了几个小时试图弄清楚这一点似乎无法深入了解。

我有这个反应组件：

import styles from './style.scss';

class ButtonComponent extends React.Component  
  render() 
    return (
      <div className=styles.bunny>
        hello world
      </div>
    );
  

和scss文件：

.bunny 
  display: block;
  margin-top:50px;
  margin-bottom:55px;
  background-color: blue;

当我加载我的 html 时，当我期望它是 <div class="bunny"> 时，该 div 没有类名

当我将类名放在 react 组件中时：

<div className="bunny"> 

然后我可以在浏览器中看到类名。

我做错了什么？

非常感谢您。

【问题讨论】：

你是如何在 webpack 中使用 css-loader 的？

我正在使用 react-boiler-plate 项目，这是我在 webpack-base.babel.js 中的内容 // Preprocess our own .css files // This is the place to add your own loaders (e.g. sass/less etc.) // for a list of loaders, see https://webpack.js.org/loaders/#styling test: /\.(s*)css$/, exclude: /node_modules/, use: ['style-loader', 'css-loader', 'sass-loader'], , 不确定这是否有帮助，你能更具体一点吗？

导入 css 或 sass 文件实际上不会导入任何可以在 js 文件中使用的 javascript 对象，因为 css 文件不会导出任何内容。它只是告诉你的模块捆绑器（webpack）在你的包中包含 css 文件，如果它在某处使用你的组件。只需使用import './style.scss' 导入文件，然后将您的类用作字符串：<div className="bunny">。当然，您的 html 文件也需要链接 css 文件。这更像是告诉 webpack：“嘿，webpack，这个组件使用了这个 sass 文件中的类，所以将它包含在我的包中。”

嗨 Trixn，这是不希望的，因为我不想在 js 文件中硬编码类名。我以前见过这个工作，但我不确定我自己配置​​错了什么。

@trixn 这根本不是真的。

【参考方案1】：

首先，您需要保证它的定义是：console.log(styles) 我不确定你是否正确导入 style.scss。

【参考方案2】：

您需要导入您的 scss，例如... import './styles.scss';

Webpack 将负责捆绑您的样式，以便您可以将 className 作为字符串添加到组件中。

<div className="bunny">Hello World</div>

【参考方案3】：

解决此问题的方法是将我的 scss 文件的名称从 style.scss 更改为 style.module.scss

【参考方案4】：

对我来说是因为我使用commonjs的require来加载一个es模块。