html - 将 css 文件绑定(bind)到 ReactJs 中的组件，例如 Angular 2+

Question

在 Angular 2+ 中，我们有 @component 指令，我们可以在其中传递元素选择器、css 文件、html 模板文件......我们通过以下代码片段完成。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

在 Angular 2+ 中，CSS 样式仅适用于 HomeComponent 元素。因此，我可以为不同的组件添加不同的样式，而不会相互影响。

AngularLayout.html

<section>
    <app-home></app-home>
    <app-about></app-about>
    <app-contact></app-contact>
</section>

对于 ReactJs，我尝试向不同的组件添加样式，例如，

LayoutHome.js

import React, { Component } from 'react';
import './LayoutHome.css';

class LayoutHome extends Component {
    render() { return <span>home</span>; }
}

export default LayoutHome;

LayoutAbout.js

import React, { Component } from 'react';
import './LayoutAbout.css';

class LayoutAbout extends Component {
    render() { return <span>about</span>; }
}

export default LayoutAbout;

ReactLayoutApp.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import LayoutHome from './components/LayoutHome';
import LayoutAbout from './components/LayoutAbout';

class App extends Component {
  render() {
    return (
      <section>
        <LayoutHome/>
        <LayoutAbout />
      </section>
    );
  }
}

export default App;

例如，让'./LayoutAbout.css'具有以下内容

span {
   color: blue;
}

'./LayoutHome.css' 具有以下内容

span {
   color: red;
}

CSS 样式相互折叠。

在 ReactJs 中将 CSS 文件标记为本地组件的更简洁的方法是什么？

Answer 1

您或许应该再添加一些 CSS 选择器。 例如，您的 LayoutAbout.css 看起来像

.about span {
   color: red;
}

还有你的 LayoutHome.css

.home span {
    color: blue;
}