CODEWITHSUNDEEP
reactjscomponents
David Rönnlid
David Rönnlid

Reputation: 91

CSS bubbling up from child to parent

Trying to address all h1 elements in a child component but the class styling bubbles up to address all h1 elements in entire DOM. How restrict styling to component to which stylesheet is imported?

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

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

& Beginning of parent component code:

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

Thanks for the help.

Upvotes: 0

Views: 451

Answers (2)

GreenTeaCake
GreenTeaCake

Reputation: 858

ReactJS has no view encapsulation (in contrast to Angular). So in order to make CSS rule much stricter you should use CSS selector with higher specificity.

Upvotes: 2

Ted
Ted

Reputation: 14937

Any css you add that defines styles by a tagname will apply to every element in the dom with that tagname, so in your case, adding a class name to the <h1/> is probably the best option.

In the PrinciplesInAoL component

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>;
  }
}

and in principlesInAoL.css, add a definition for that class:

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

Upvotes: 2

Related Questions