React.JS 中的 CSS 模块答案

【问题标题】：CSS Modules in React.JSReact.JS 中的 CSS 模块
【发布时间】：2020-04-16 14:54:33
【问题描述】：

我使用的是 create-react-app 包的第 3 版。但我的样式不适用

import style from './App.css'

【问题讨论】：

【解决方案1】：

使用module 扩展名保存您的css 文件。

App.module.css

然后像这样导入它：

import style from './App.module.css'

最后，像这样应用你的样式：

<div className={style.container}> Hello World! </div>

【讨论】：

我在 className={style.container} Cannot find name 'style'.ts(2304) 行收到错误，我该怎么办？使用 React 版本 17.0.1

【解决方案2】：

请阅读此链接，了解如何将样式表添加到 CRA。 https://create-react-app.dev/docs/adding-a-stylesheet/

总的来说，你应该写import './App.css'

【讨论】：

【解决方案3】：

如果您想轻松地将样式应用于现有代码，可以使用patch-styles 包。请参阅StackBlitz 中的使用示例。它引入了一种更具声明性的方式来应用您需要使用 <PatchStyles classNames={style}> 包装代码的样式，其中 style 是样式模块的默认导入。

【讨论】：

【解决方案4】：

我猜你只是想导入和应用样式，对吧？

如果你只想使用css，你可以像这样导入它：

import './App.css'

它将被应用！

【讨论】：

【解决方案5】：

试试这个。
import './App.css';
添加您的代码。

【讨论】：