如何在ReactJs中避免CSS冲突

Question

我并不是React专家，但据我所见，如果我导入一些CSS样式表，它们将适用于我的整个应用程序。如果我想在多页应用程序中使用React，该如何为每个页面定义CSS样式表？

我的文件结构

第一页

import React, { Component } from "react";
import "./style.css";

export default class Page1 extends Component {
  render() {
    return (
      <div>
        <button>with css</button>
      </div>
    );
  }
}

第二页

import React, { Component } from "react";

export default class Page2 extends Component {
  render() {
    return (
      <div>
        <button>no css</button>
      </div>
    );
  }
}

样式表.css

button {
  background: green;
}

这个样式只应用在第一页，但是它也被应用到了第二页。我该怎么解决？

该如何解决这个问题？这个样式仅适用于第一页，但它却应用到了第二页。

- Niccolò Caselli

---

你在使用Webpack吗？无论如何，只需在组件子级中导入CSS文件，而不是在根目录中导入。 - Black Hole

正如OP所述，问题仍然存在，因为在任何组件中导入的每个样式都是全局可用的，并且适用于整个应用程序（因为CSS是附加的）。 - Jibin Joseph

你能展示一下你是如何导入它们的吗？你只是在index.html中包含它们吗？你使用了打包工具吗？（如果使用，是哪一个？）等等。 - Mike 'Pomax' Kamermans

可能是如何使React CSS导入组件范围化？的重复问题。 - Nino Filiu

还要查看关于模块化CSS的文章和关于作用域CSS的问题。 - Nino Filiu

Answer 1

避免在Reactjs页面之间发生css冲突的最简单方法是使用 css-modules （它不是依赖项），只需将页面样式表名称从' my-stylesheet.css '更改为' my-stylesheet.module.css '，并将其导入为' my-stylesheet.module.css '。

- gianlop3z

Answer 2

有两种不同的方法可以实现这一点，分别是使用：

• CSS模块
• CSS in JS

这篇简短文章对这两种方法进行了比较。我更喜欢CSS模块。

CSS模块如何使用？

设置

1. 假设你的CSS文件名为 styles.css，要将其转换为模块，你需要将其更改为 styles.module.css
2. 像这样导入CSS文件： import styles from './styles.module.css'（你可以使用任何其他名称来代替styles）

命名

<div className={styles.box_one}>
   some content
</div>

重要提示：请确保你的CSS文件中的类名为.box_one而不是.box-one 个人偏好：

我会这样导入CSS文件：import s from './styles.module.css'，并使用s而不是styles来使代码更加简洁。

我的JSX代码如下：

<div className={s.box_one}>
   some content
</div>

- Gass

Answer 3

这是一个随机的React应用程序：

我所做的是为我的容器（页面）创建CSS文件，并在其中导入它们：

import './styleForComponent.css'

样式应用于子组件，不会干扰我的其他页面。如果您想要一些全局样式，可以像在React之外那样将它们导入到index.html中，或者在index.js中导入您的CSS。

- Halt

Answer 4

"最初的回答" -> "原始答案"

如果您将组件的导入放在顶层，例如：

import ReactDOM from "react-dom";
import "./yourCSS.css";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

然后所有子组件都将可见。

- Mario

Answer 5

你可以查找styled components或者react-jss。它们可以帮助你绑定特定组件的样式，这些样式不会与其他组件冲突。

一个react-jss示例代码如下：

import injectSheet from 'react-jss'
var styles = {
  button : {
   //styles here
  }
}


const Button = ({ classes}) => (
  <button className={classes.myButton}>
      Hello
    </button>
)

const StyledButton = injectSheet(styles)(Button)
//render it
 <StyledButton></StyledButton>

https://www.npmjs.com/package/react-jss

- coolguy

Answer 6

你可以使用 module.css 或 Styled Components 来避免这个错误。不要使用 "./style.css"，而是创建一个名为 "./style.module.css" 的文件，这将限制样式仅适用于你的组件。使用示例 -

import React, { Component } from "react";
import styles from "./styles/FlexDemo.module.css";
export default class FlexDemo extends Component {
    render() {
        return (
            <div className={styles.container}>
                <div className={styles.subContainer}>
                    <img
                        src="https://source.unsplash.com/random"
                        width="40%"></img>
                    <div className={styles.subText}>
                        <h1>Flex Box Demo</h1>
                        <p>
                            Aliquip ea culpa dolore ut culpa culpa incididunt
                            minim culpa qui elit veniam ut. Excepteur irure
                            voluptate amet nisi excepteur non dolore ipsum id
                            dolor proident mollit nostrud nulla. Duis proident
                            voluptate quis sit excepteur ut qui mollit. Anim
                            ullamco nostrud proident amet nulla ut est deserunt
                            cillum. Ea ex nostrud occaecat consectetur et.
                        </p>
                    </div>
                </div>
            </div>
);
}}

这是一个 CSS 文件，包含以下内容：

css file image

。

- Kush Daga

Answer 7

你所需要做的就是按照以下方式导入整个应用程序的样式：

import ReactDOM from "react-dom";
 import "./TheWholeAppStyle.css"; 
import App from "./App"; ReactDOM.render(<App />,document.getElementById("root"));

- mohamed ibrahim