如何避免 ReactJs 中的 CSS 冲突答案

【问题标题】：How to avoid CSS conflicts in ReactJs如何避免 ReactJs 中的 CSS 冲突
【发布时间】：2019-08-11 12:14:09
【问题描述】：

我根本不是反应方面的专家，但从我所见，如果我导入一些 css 表格，这些表格将适用于我的所有应用程序。如果我想将 react 用于多页应用程序，如何为每个页面定义 css 表？

编辑

这是我的简单结构

第 1 页

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

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

style.css [此样式应仅应用于第一页]

button {
  background: green;
}

第 2 页

import React, { Component } from "react";

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

如果我在主文件中不导入第1页不会出现问题，但我需要为路由器导入它

import React, { Component } from "react";
import Page1 from "./Page1";
import Page2 from "./Page2";

class App extends Component {
  render() {
    return (
      <div classNameName="App">
        <Page2 />
      </div>
    );
  }
}
export default App;

【问题讨论】：

你在使用 webpack 吗？无论如何，只在根目录下的子组件中导入css文件
^问题仍然存在，正如 OP 所述，因为在任何组件中导入的每个样式都是全局可用的，并且适用于整个应用程序（因为附加了 css）。
你能说明你是如何导入它们的吗？您只是将它们包含在您的 index.html 中吗？你在使用捆绑器吗？（如果有，是哪一个？）等等。
How to make React CSS import component-scoped?的可能重复
同时检查this article on modular CSS和this issue on scoped CSS

标签： javascript html css reactjs frontend

【解决方案1】：

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

【讨论】：

【解决方案2】：

您只需为整个应用导入样式，如下所示：

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

【讨论】：

【解决方案3】：

您可以使用 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

【讨论】：

【解决方案4】：

您可以检查样式组件或 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

【讨论】：

【解决方案5】：

如果您要导入顶级组件，例如：

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

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

然后在所有子组件中都是可见的。

【讨论】：

【解决方案6】：

这是一个随机反应应用：

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

import './styleForComponent.css'

样式适用于子组件并且不会干扰我的其他页面，如果您想要一些全局样式，您可以在 index.html 中导入，就像没有 React 或在 index.js 中导入您的 css 一样

【讨论】：