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() {
```

感谢您的帮助。

Answer 1

您添加的任何通过标记名定义样式的css都将应用于具有该标记名的dom中的每个元素，因此，在您的情况下，将类名添加到<h1/>可能是最佳选择。

在PrinciplesInAoL组件中

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

export default class PrinciplesInAoL extends Component {
  render() {
    return <h1 className="principlesInAoL-h1">Principles in Areas of Life</h1>;
  }
}

并在principlesInAoL.css中，为该类添加一个定义：

.principlesInAoL-h1{
  /* your styles here */
}

Answer 2

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

CSS从孩子到父母

2 个答案: