Question

我根本不是反应专家，但是从我可以看到的是，如果我导入一些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>
    );
  }
}

如果我没有在主文件中导入Page 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;

Answer 1

这是一个随机反应应用程序：

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

import './styleForComponent.css'

样式适用于子组件，并且不影响我的其他页面，如果您需要某种全局样式，则可以像没有React一样将其导入index.html中，或者将CSS导入index.js中

Answer 2

例如，如果您导入到顶层组件，则：

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

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

然后在所有子组件中将可见。

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

您需要做的就是导入整个应用程序的样式，如下所示：

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

如何避免ReactJs中的CSS冲突

6 个答案: