时间戳

首页 > 解决方案 > CSS className 没有对 Reactjs 进行任何更改

css - CSS className 没有对 Reactjs 进行任何更改

问题描述

我目前正在使用 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()

标签： cssreactjswebpack

解决方案

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

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

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

:local .container {...

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

推荐阅读