React外部CSS文件的共享行为-组件的主体背景

Question

我如何在React中改变外部CSS文件的React共享行为，以便我可以为不同的组件设置不同的body背景?

css

body {
background-image: url('../../../images/bannerbackground.png');
}

home.css

body {
background-color: rgb(185, 174, 160);
}

但是对于react与同一根的组件的共享行为，我无法区分它，有什么解决方案吗?

Answer 1

是的，有一个解决方案。这很简单。为了避免冲突，你可以实现CSS模块。将CSS文件重命名为filename.module.css

结果:

// note the classname generated 
<button class="Button_error_ax7yz">Error Button</button>

根据官方的repo CSS模块是"默认情况下所有类名和动画名都在本地作用域的CSS文件"。这是什么意思?CSS模块不是浏览器中的规范或实现，而是构建步骤中的一个过程(在Webpack或Browserify的帮助下)，它改变类名和选择器的作用域(有点像命名空间)