问两个react组件之间的Css属性冲突

EN

html { 
  font-family: sans-serif;
}

/* 
This rule is not needed ↷
p { 
  font-family: sans-serif;
}
*/

html {
  font-family: sans-serif;
}

p {
  line-height: 1.5;
}

/* 
This rule is not needed ↷
p a {
  line-height: 1.5;
}
*/

关于css优先级，

基本上，下面的css按照优先级的顺序具有较高的内联样式attribute> id>类、其他属性、大写类(如:first-

• )>标记元素、大写元素(如：：id>)。

• 如果优先级相同，则具有较大数值的css具有较高的优先级。

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

如果不在内部且已导入，则优先级相同。而且由于css的继承性，层叠，如果你定义了p，即使它是一个不同的文件，它也会受到影响。

还有一些css方法，如BEM、SMACSS和OOCSS。然而，这也没有解决根本问题。

从CSS方法，如边界元模型和原子CSS到以编程方式封装的CSS模块，许多人都在尽最大努力避开或以其他方式抑制这些功能。这给了开发人员对CSS的更多控制，但只是一种基于频繁干预的专制控制。

https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/

有一些选项，比如阴影dom，但polyfill也直接与性能问题相关。

如果你正在使用react，我认为next的态度所采取的关于css的方法可能是我们所能看到的最接近当前最好的方法。

我希望你能看看css的下一步是如何划分的。

https://nextjs.org/