React.JS 中的 CSS 模块

Question

我正在使用创建-反应-应用程序包的第3版。但我的风格不适用

import style from './App.css'

Answer 1

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

App.module.css

然后像这样导入它：

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

最后，像这样应用样式：

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

Answer 2

请阅读此链接，讨论向CRA添加样式表。 https://create-react-app.dev/docs/adding-a-stylesheet/

总之，你应该写import './App.css'

Answer 3

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

Answer 4

例如，我们必须像这样的文件

按钮模块.css

.error {
background-color: red;
}

另一个样式表.css

.error {
color: red;
}

**如何使用？ **

import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet
class Button extends Component {
render() {
// reference as a js object
return (
<div>
<button className={styles.error}>Error Button</button> // Use 
Module css 
<button className="error">Error Button</button> //normal css 
file
</div>
);
}}

Answer 5

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

如果您只想使用该css则可以将其导入，如下所示：

import './App.css'

它将被应用！

Answer 6

试试这个。

import './App.css';添加代码。