Tie css file to a component in ReactJs like Angular 2+ - html

Question

In Angular 2+, we have #component directive where we can pass element-selector, css file, html template file,.. We do it by the following snippet.
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() {
}
}
In Angular 2+, CSS styles are local to that HomeComponent element alone. So, I can add different styles to different components without affecting each other.
AngularLayout.html
<section>
<app-home></app-home>
<app-about></app-about>
<app-contact></app-contact>
</section>
For ReactJs, I tried to add styles to different components like,
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;
For example, let './LayoutAbout.css' be having the following
span {
color: blue;
}
'./LayoutHome.css' be having the following
span {
color: red;
}
CSS styles are getting collapsed with each other.
What could be the cleaner way of tagging CSS file to a local component in ReactJs?

Answer 1

You should probably just add some more CSS selectors.
For instance, your LayoutAbout.css would look like
.about span {
color: red;
}
And your LayoutHome.css
.home span {
color: blue;
}

Answer 2

One way to solve this problem is to be more specific in your css to avoid conflicts by giving a class or id to an outer element within your component and nesting any needed styles for that component under them like so:
LayoutAbout.js
import React, { Component } from 'react';
import './LayoutAbout.css';
class LayoutAbout extends Component {
render() {
return (
<span id="about">
about
<span>nested content</span>
</span>
);
}
}
export default LayoutAbout;
LayoutAbout.css
#about {
color: blue;
}
#about span {
color: dodgerblue;
}
Another alternative would be to take advantage of the shadow dom which will encapsulate your styles within your custom component. This ensures that the css in your component won't affect anything outside and that you'd have to be explicit to affect any elements inside the shadow dom of your custom component.