Css 应用程序顺序

在使用Create-React-app创建的React-app中，我需要做什么才能以正确的顺序应用我的SCSS样式？

例如，在

中，我希望React按照以下顺序应用我的样式：

.page

。页面格式

。页面登录

也就是说，支持

.page login

中定义的样式来覆盖

.page form

或

.page

中定义的任何样式

然而，在实践中，我发现

.page

中定义的样式会覆盖其他样式。我发现覆盖

.page

中定义的样式的唯一方法是添加

！重要信息

。登录页面

---

有没有办法解决这个问题？

更改样式表中规则的顺序使用SCS并使用like.page{…&-form{…}&-login{…}

。page

和

。page form

在

App.scss

中定义（按此顺序）和

。页面登录

是在不同的scss文件中定义的，该文件包含在相应的组件中。重新订购执行

导入的行

？对，我想我已经解决了。在App.js中，我导入所有React组件（它们自己导入自己的scss文件），然后导入这些组件导入下面的App.scss。当我将App.scss的导入移到其他组件的导入之上时，它似乎可以工作！更改样式表中规则的顺序使用SCS并使用like.page{…&-form{…}&-login{…}

。page

和

。page form

在

App.scss

中定义（按此顺序）和

。页面登录

是在不同的scss文件中定义的，该文件包含在相应的组件中。重新订购执行

导入的行

？对，我想我已经解决了。在App.js中，我导入所有React组件（它们自己导入自己的scss文件），然后导入这些组件导入下面的App.scss。当我将App.scss的导入移到其他组件的导入之上时，它似乎可以工作！