TypeScript React AntDesign CSS Layer Demo

这是一个演示项目，用于展示Ant Design的StyleProvider组件的CSS Layer功能。

功能特点

当使用StyleProvider组件时，Ant Design的样式会使用CSS Layer，在产生样式时会把自己的样式放在一个antd的layer中，从而处于低优先级。

而我们自己定义的样式，没有放在任何layer中，所以会处于高优先级，从而覆盖Ant Design的样式。

如果不使用AntD的layer功能，则我们可能需要使用很多hack手段，才能覆盖Ant Design的样式。比如加上!important，或者加上一些额外的#id之类。

Css中提供的@layer功能比较弱，因为它是静态的。必须先声明顺序，然后才是实现，也就是如下：

@layer antd, custom;

@layer antd {
  .ant-select {
    color: red;
  }
}

@layer custom {
    ...
}

@layer custom, antd; // 这样是无效的

所以我们在页面上不能自由的定义层顺序，不能用状态来动态调整，作用不太大。算是聊胜于无。

本来对它期望很高，以为可以动态调整，结果发现不行。

pnpm install

pnpm start

服务器启动后会自动在浏览器中打开页面。