如何让App样式优先级高于自带样式表的React组件？

问题背景 #

我有一个独立可复用的CustomButton组件，自带样式表CustomButton.css。现在想通过props传递自定义className，并在App.css中定义该类的样式，但因为组件样式表后加载，导致组件内部样式优先级更高，自定义样式不生效。

现有代码 #

CustomButton.js

import "CustomButton.css";

export default function CustomButton({className=null, children}) {
    return (
        <button className={"custom-button" + (className? " " + className: "")}>
            {children}
        </button>
    )
};

CustomButton.css

.custom-button {
    background: green;
}

App.js

import "./App.css"
import CustomButton from "./CustomButton";


export default function App() {
    return (
        <div className="App">
            <CustomButton className="app-button">This is app button</CustomButton>
        </div>
    )
};

App.css

.app-button {
    background: red;
}

约束条件 #

• 不能改变文件导入顺序
• App无法知晓组件内部的.custom-button类名，不能通过该类修改样式
• 禁止使用!important
• 禁止使用内联样式
• 不依赖CSS特异性提升优先级
• 不能破坏CustomButton的封装性，不能修改组件的核心样式逻辑

解决方案：利用CSS @layer隔离组件内部样式 #

修改CustomButton.css，将组件自身样式放入一个独立的CSS图层中：

@layer component-styles;

@layer component-styles {
    .custom-button {
        background: green;
    }
}

原理说明 #

CSS的@layer规则有一个关键特性：所有未被分配到任何图层的样式，优先级会高于所有图层内的样式，和样式表的加载顺序无关。

这里我们在组件内部把自身样式归入component-styles图层，而App中定义的.app-button样式不属于任何图层，因此它的优先级会自动高于组件内部的.custom-button样式，最终按钮背景会显示为红色。

符合所有约束的验证 #

1. 无需调整导入顺序：App依然先加载App.css，再引入组件
2. App无需知晓组件内部类名：只需要使用自己定义的.app-button
3. 未使用!important或内联样式
4. 两个选择器都是单一类选择器，特异性完全相同，没有依赖特异性提升优先级
5. 图层定义完全在组件内部完成，App不需要知道图层名称，组件封装性不受影响

内容的提问来源于stack exchange，提问作者yuukiroh