为什么我的 CSS 样式不适用于页面？答案

【问题标题】：Why does my CSS styles don't apply in the page?为什么我的 CSS 样式不适用于页面？
【发布时间】：2019-09-21 07:50:48
【问题描述】：

如何使用来自不同文件的 CSS 设置 React 应用程序的样式？这段代码有什么问题？

按钮.css

.Button {
  cursor: pointer;
  margin-left: 5px;
  margin-bottom: 15px;
  background-color: aquamarine;
}

Button.js

import React from 'react';
import classes from './Button.css';

const button = (props) => (
<div>
    <button className={classes.Button}>Click ca să dai muie</button>
</div>
);

export default button;

<Button /> 组件在 statefull 组件之后被调用。

PS：我正在使用 create-react-app v2 和 React 16.8.6

【问题讨论】：

标签： css reactjs create-react-app

【解决方案1】：

仅将 CSS 导入您的组件。并使用样式为Strings。

import React from 'react';
import './Button.css';

const button = (props) => (
<div>
    <button className="Button">Click ca să dai muie</button>
</div>
);

export default button;

【讨论】：

谢谢。它确实奏效了。你也知道为什么我使用的方法不起作用吗？
@NandraMihnea，原因是它使用 Webpack 加载文件的方式。这个import file.css 仅用作参考，因此 Webpack 知道它必须解析文件并添加到最终的 CSS 包中。

【解决方案2】：

将external css file 中的样式应用于react component 你应该这样做：

像这样导入css文件：

import './Button.css';

样式文件：

.Button {
      cursor: pointer;
      margin-left: 5px;
      margin-bottom: 15px;
      background-color: aquamarine;
    }

您的组件文件：

    import React from 'react';
    import './Button.css';

    const Button = (props) => (
    <div>
        <button className="Button">Click ca să dai muie</button>
    </div>
    );

    export default Button;

【讨论】：

【解决方案3】：

create-react-apprequires 你拥有CSS Modules 格式为[name].module.css 的文件。

摘自create-react-app被驱逐config/webpack.config.js：

默认情况下，我们支持扩展名为 .module.css 的 CSS 模块

因此，如果您想继续使用 CSS 模块，您应该将 css 文件的名称更改为 Button.module.css。

【讨论】：