如何在 ReactJS 中将 css 文件导入为本地范围？

Question

如何为单个视图在本地导入样式表。

我有两个视图/home和/blog以下文件目录：

src
?  
????components       
      ?
      ????Home
      ?     Home.js
      ?     Home.css
      ????Blog
            Blog.js
            Blog.css

我有一个单独的 css 文件home.css仅用于主页视图，但该样式也应用于博客视图。

我希望home.css文件仅适用于home.js视图。

主页.css

.text1 {
   font-size: 1em !important;
   font-family: "Noto Sans", sans-serif !important;
   color: red;
 }

主页.js

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

class Home extends Component {
  render() {
    return (
      <div className="text1" style={{ overflow: "Hidden" }}>
        <h1>This must be red.</h1>
        <a href="/blog">Go to Blog</a>
      </div>
    );
  }
}

export default Home;

博客.js

import React, { Component } from "react";
import "./blog.css";   //I didn't Import Home.css here and blog.css is and empty css file.

class Blog extends Component {
  render() {
    return (
      <div className="text1" style={{ overflow: "Hidden" }}>
        <h1>This must be black.</h1>
        <a href="/">Go to Home</a>
      </div>
    );
  }
}

export default Blog;

这是反应应用程序：

https://codesandbox.io/s/github/AzizStark/ReactStyleIssue/tree/master/?fontsize=14&hidenavigation=1&theme=dark

Answer 1

对于本地范围不要使用导入，使用 require ：

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

class Home extends Component {
  render() {
    require("./home.css"); // here
    return (
      <div className="text1" style={{ overflow: "Hidden" }}>
        <h1 class="red">This must be red.</h1>
        <a href="/blog">Go to Blog</a>
      </div>
    );
  }
}

export default Home;