reactjs - CSS 从子级冒泡到父级

Question

尝试处理子组件中的所有 h1 元素，但类样式冒泡以处理整个 DOM 中的所有 h1 元素。如何将样式限制为导入样式表的组件？

```
import React, { Component } from "react";
import "../styles/principlesInAoL.css";

export default class PrinciplesInAoL extends Component {
  render() {
    return <h1>Principles in Areas of Life</h1>;
  }
}
```

& 父组件代码的开头：

```
import React, { Component } from "react";
import AoLDescription from "./aoLDescription";
import MetaPrinciple from "./metaPrinciple";
import "../styles/principles.css";
import PrinciplesInAol from "./principlesInAoL";

export default class Principles extends Component {
  render() {
```

谢谢您的帮助。

标签： reactjscomponents

Answer 1

ReactJS 没有视图封装（与 Angular 相比）。因此，为了使 CSS 规则更加严格，您应该使用具有更高特异性的 CSS 选择器。