React脚手架项目款的css样式不能只是适用于当前组件？？？

Question

之前再用vue;昨天自己试着搭建一个React的脚手架项目，发现样式不能自适应于当前组件，，
下面贴图：
1.我的Home组件下有HomeFirst组件；和 HomeSecond 两个子组件；父组件定义Id

2.下面贴出子组件 HomeFirst；；子组件定义id=“HomeFirst”

3.我写了一个父组件的样式；； 基于id作为标记

4.我的父组件和子组件的中都有title的class名； 所以子组件也会加上父组件的样式；；
这样是不是父组件的样式和子组件的样式都得写一遍？？有没有什么比较好的办法，，，
路过的大佬帮忙看下，，最好你能贴父子组件样式代码，，简单说几句，，先谢过啦！！！

Answer 1

首先回答你的标题，CSS样式不是只适用当前组件的。子组件的样式也是会继承父组件的样式的。
解决方式一般由两种:

1. 如果你不想让子组件继承，那么父子组件在定义class名称时就要区分开，这和你写一般的HTML样式的原则是相同的。

2. 使用PostCSS等工具，编译时为你的每个样式class重命名，以避免class冲突问题。

Answer 2

由于组件都转化成了html标签插入到DOM中，组件会带上自己的样式命。 那么自然，子组件会继承一些父组件的样式。