CSS className 没有对 Reactjs 做任何改变

Question

我目前正在使用 Rails 和 ReactJS。我在我的 reactjs 文件中使用 css 时遇到困难。似乎每次我尝试使用它时，都没有应用任何更改。在我的 App.jsx 文件中我有这个:

import React from "react";
import styles from "./styles.css";

export default class Register extends React.Component {

  render() {
    return (
      <div className={styles.container}>
        <h1> this text should appear to the right </h1>
      </div>
   );
  }
}

在我的 styles.css 文件中我有这个:

.container {
    width:40%;
    text-align:right;
}  

郑重声明，我正在使用 webpack。谁能帮我理解为什么 css 对我的 jsx 组件没有任何影响。我到处寻求帮助，但无法将各个部分拼凑起来。

如果重要的话，这就是我的“config/webpack/development.js”文件的样子:

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

Answer 1

这取决于 webpack 加载器设置。如果您使用 css-loader 在 react-scripts 中配置(自 1.1.5 起)，则使用 {modules: false} 加载类名 选项，即全局样式，可以在 JSX 代码中作为字符串引用:

import "./styles.css";
... className="container" ...

或者您可以使用以下 CSS 文件语法加载本地样式:

:local .container {...

或者适本地编辑您的 webpack.config.js(有关各种选项的官方文档，请参阅 https://github.com/webpack-contrib/css-loader#scope)。