CSS поднимается от ребенка к родителю

Question

Попытка обратиться ко всем элементам h1 в дочернем компоненте, но стилизация класса всплывает, чтобы охватить все элементы h1 во всем DOM. Как ограничить стилизацию компонента, в который импортируется таблица стилей?

```
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

ReactJS не имеет инкапсуляции вида (в отличие от Angular). Поэтому, чтобы сделать правило CSS более строгим, вы должны использовать селектор CSS с более высокой специфичностью.

Answer 2

Любой добавляемый вами 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 */
}