如何在反应应用程序的不同组件上加载不同的 .css 文件？

Question

我有两个 .jsx 文件代表它们各自的组件。

第一个是，Blog.jsx

import React from "react";
import '../assets/css/blog.css';

export const Blog = () => (
    <div>
        <h1>Hello Blog</h1>
    </div>
)

及其各自的 CSS 文件 blog.css

div { background: #ff481f; }

第二个是Landing.jsx

import React from "react";
import '../assets/css/landing.css'

export const Landing = () => (
    <div>
        <h1>Hello Landing</h1>
    </div>
)

及其各自的 CSS 文件 landing.css

div { background: #86ff2b; }

我在 App.js 文件中添加了路由并调用了这两个组件的实例，该文件是 React 应用程序的默认文件。运行应用程序后，当导航到组件时，我遇到了两个组件的背景颜色相同的问题（它仅加载 landing.css 并且永远不会更改）。

如何解决每个组件仅使用其各自的 .css 文件并加载它的问题？

Answer 1

不要使用 HTML 标签定义你的 CSS，因为它会影响你的整个应用程序。

使用 className、id 或内联样式。

like-App.css

  .myApp{ color: red;}
  #myApp2{ color: blue;}

App.js

import './App.css'

<div className="myApp">color changed by className</div>
<div id="myApp2">color changed by id</div>
<div style={{color:'red'}}>color changed by inline object styling</div> // inline styling

Answer 2

默认情况下webpack 和其他构建工具会将所有 CSS 文件编译为一个，即使 css 是在单独的 JSX 文件中导入的。因此，您不能使用不同的 CSS 文件并期望您不会影响页面的其他部分。

你有一些选择：

1. 使用 BEM 来命名类名。

2. 使用 cssModules。在这种情况下，元素将拥有自己的 css 类名，并且样式不会影响任何其他元素，除非您使用 :global 选择器。

   • css-module

Answer 3

使用 html 标签作为 css 选择器是一种不好的做法（因为存在您描述的行为）。

您应该只使用 css 类或内联样式（使用 id 是另一种不好的做法，id 具有高优先级）。

div {
  width: 20px;
  height: 20px;
}

#id {
  background: red;
}

.class {
  background: green;
}

<div id="id" class="class"></div>

如果使用 css 类会出现同样的问题（当您有两个相似的类时）。这种情况是使用 css 模块 （构建规则集） 决定的，或者您可以使用 css-in-js （外部库），这有其优点和缺点。你也可以使用BEM（方法），如果你的应用程序不大，你可以避免这个麻烦。

css 模块 会将随机哈希添加到您的类中，而.my-awesome-class-name 您将获得.my-awesome-class-name-dew3sadf32s。

因此，如果您在第一个文件中有两个类 .class 和第二个文件中的 .class，最后您将获得两个类 .class-dew23s2 和 .class-dg22sf，您的样式将按预期解析。

css-in-js 是一种类似的方式，只是您应该使用 javascript 编写样式并获得一些好处，例如仅包含当前需要的样式 （您正在寻找的现在） 和其他几个。

您可以使用纯 css / scss / postcss / 等进行编码，但许多公司已经在 css 模块和 css-in-js 之间进行选择。

BEM 只是类名的命名约定。

最后 - 如果你使用 react 使用内联样式，你应该记住：

{} 是对象的构造函数，{} 在每次调用时都返回 new 对象，这意味着如果您编写如下内容：

class MyAwesomeComponent extends Component {
  render() {
    return <div style={{color: "red"}}></div>;
  }
}

或

class MyAwesomeComponent extends Component {
  render() {
    const divStyles = {color: "red"};

    return <div style={divStyles}></div>;
  }
}

div 将在每次您的render 调用时重新渲染，因为div 采用了新道具。

相反，你应该在你的类之外定义你的样式（例如）：

const divStyles = {color: "red"};

class MyAwesomeComponent extends Component {
  render() {
    return <div style={divStyles}></div>;
  }
}

Answer 4

如果您希望改进您​​的 css 导入/加载，这不是最佳解决方案。

但是，如果您不想深入研究 css，快速解决问题并继续使用 HTML 标签，这可能是最好的解决方案。

您可以为每个组件添加一个 div，为该 div 定义一个 Id 并包装该组件。之后在组件的 css 文件中，您将定义以 #id 开头的所有样式，因此所有 css 类或 HTML 标记将只影响相应的组件。

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

//App
function App(props){
  return [
    <Blog />, <OtherComponent />
    ]
}
//Blog component
function Blog(props){
  return <div id="blog">
    <h1>I am Blog</h1>
    </div>
}

//Other component
function OtherComponent(props){
  return <div id="otherComponent">
    <h1>Im am other component</h1>
    </div>
}

/* blog.css*/
#blog h1{
color:yellow;
}

/* otherComponent.css*/
#otherComponent h1{
color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="root"></div>