如何在 React 应用程序的不同组件上加载不同的 .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 文件land.css

div { background: #86ff2b; }

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

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

Answer 1

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

您有一些选择：

1. 使用BEM命名类名。

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

   • CSS模块

Answer 2

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

使用 className、id 或内联样式。

就像-App.css

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

应用程序.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