🐛[BUG] 2.8.3, 2.8.4 样式渲染有问题

[liuzhaowei55]

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

2.8.2 -> 2.8.3 之后样式全掉了，2.8.2 显示正常

📷 复现步骤

使用了

<StyleProvider layer>
</StyleProvider>

🏞 期望结果

💻 复现代码

https://stackblitz.com/edit/vitejs-vite-kkfjszwu?file=src%2FApp.jsx

© 版本信息

• ProComponents 版本:2.8.3

🚑 其他信息

[liuzhaowei55]

@chenshuai2144

[Wxh16144]

2.8.3 我倒是改过 layer 有关代码 PR #8904

用你的复现代码，安装 2.8.2 也是有问题的。 所以不确定是不是和我那个改动有关。

[liuzhaowei55]

我需要重新调整下这段复现代码，目前是受项目本身 index.css 影响，展示不正常，我重新调整一下。

[liuzhaowei55]

https://stackblitz.com/edit/vitejs-vite-kkfjszwu?file=src/App.jsx

对代码做了一个调整，模拟我的真实业务代码引入了 Tailwind，以及修改了代码嵌套。

代码嵌套在 <PageContainer /> 中可以复现问题

[Wxh16144]

感谢补充，我还没接触过 tailwind css，我去学习一下 顺便看看这个问题。

[liuzhaowei55]

2.8.3 我倒是改过 layer 有关代码 PR #8904

用你的复现代码，安装 2.8.2 也是有问题的。 所以不确定是不是和我那个改动有关。

重新看了这个 PR，因为定义有 dependencies

所以生成了下图第一个方框的 layer 定义

但项目本身配置有根据文档配置 @layer tailwind-base, antd; 这个配置最终就没有生效了

可以考虑移除 dependencies 配置，由用户在使用中自定义 @layer 属性

[Wxh16144]

我花了一点时间看了一下，貌似是符合预期的，tailwind-base layer 会生成默认的 button 样式， 把 antd 的样式给覆盖掉了。

[Wxh16144]

https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer 看了一下文档，貌似这里可以修改 base 样式的逻辑。

[Wxh16144]

@layer tailwind-base, antd;

@layer tailwind-base {
  @tailwind base;
}

@layer antd {
  @tailwind base;
}

@tailwind components;
@tailwind utilities;

我把 antd layer 也应用了 tailwind base，这样貌似就好了🤔

[Wxh16144]

重新看了这个 PR，因为定义有 dependencies

所以生成了下图第一个方框的 layer 定义 但项目本身配置有根据[文档](https://ant.design/docs/react/compatible-style-cn#tailwindcss-%E6%8E%92%E5%B8%83-layer)配置 `@layer tailwind-base, antd;` 这个配置最终就没有生效了

可以考虑移除 dependencies 配置，由用户在使用中自定义 @layer 属性

我又看了一下，我前面说的可能有问题，确实是 css 插入顺序有问题..

[Wxh16144]

确实是 css 插入顺序有问题..

看了一下 antd cssinjs 实现， 目前来看可以通过 container={document.body} 将 css 样式插入到 body 来规避顺序问题。倒是能解决 layer 问题。

[hongfanmeng]

我也遇到这个问题，<style data-rc-order="prepend" data-css-hash="_layer-@layer antd-pro">@layer antd,antd-pro;</style> 把自定义的 layer 顺序给覆盖掉了

[liuchuzhang]

@hongfanmeng 我也有同样的问题

目前来看可以通过 container={document.body} 将 css 样式插入到 body 来规避顺序问题。倒是能解决 layer 问题。

在 StyleProvider 添加 container={document.body} 解决了我的这个问题

[Wxh16144]

看来有很多人遇到这个错误，我在 #8904 这个 PR 加了一个 deps （这个是参考 antdx 那边写的）。感觉得 revert 掉。

原因是加入 deps 后， antd 的 cssinjs 库会在 style 最顶部插入 layer 顺序，这个时候顺序就写死了， 导致后面开发者无法重新自定义顺序