在 React 应用程序中导入 CSS答案

【问题标题】：Import CSS in a react app在 React 应用程序中导入 CSS
【发布时间】：2018-11-10 17:07:10
【问题描述】：

在create react app 文档中，它说 App.css 是在 App.js 中导入的。还有一种方法可以从组件中加载编译后的 css 文件吗？

// 我的视图组件

import styles from '../../App.css';

【问题讨论】：

你的意思是，从组件的方法中动态导入它？
我留下了一个关于在 CRA 中使用 CSS 的绝对基础知识的答案，但这个问题对于你想要完成的究竟是什么有点令人困惑。多一点上下文会有所帮助。

标签： reactjs

【解决方案1】：

对于 css 文件，您可以像这样导入它们

import "../../App.css"

这将导入该文件中的所有选择器和 CSS 规则。

如果您尝试使用以下方式为组件中的单个元素设置样式：

<div style={myStyles.wrapper} />

然后你需要从文件中导出一个 JS 对象

例如：

export default {
    wrapper: {
       background: "red"
    }
}

然后就可以导入使用了

import myStyles from "../myStyles.js"

<div style={myStyles.wrapper} />

【讨论】：

【解决方案2】：

您可以在组件中导入如下所示的 css 文件

导入'./header.css';

Imagine your header.css file looks like 

.header {
    background-color:  rgb(49, 118, 197);
    height:100px;
    border:10px solid red;
}

To use the style, you can use the class like ,

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

希望这会有所帮助:)

【讨论】：