antd样式兼容tailwind情况下，组件中引入antdx会导致antd组件（包括antdx使用的）样式失效

[Lomathsus]

重现步骤

@ant-design/x: 1.0.5 antd: 5.24.2 tailwindcss: 4.0.9

根据Antd样式兼容文档配置Tailwind兼容：

@layer theme, base, antd, components, utilities;

@import 'tailwindcss';

在不引入Antdx的情况下，Antd与Tailwind能够正确根据@layer样式优先级降权，即此处的Flex组件能够优先使用tailwind提供的m-auto，如果不降权，则是优先使用Flex自己提供的magrin: 0

 <Layout style={{ minHeight: '100vh' }}>
      <Sider style={{ background: token.colorBgContainer }} trigger={null}>
        <div className="demo-logo-vertical" />
        {/* <Conversations */}
        {/*  items={items} */}
        {/*  defaultActiveKey="item1" */}
        {/*  style={{ */}
        {/*    background: token.colorBgContainer, */}
        {/*    borderRadius: token.borderRadius, */}
        {/*  }} */}
        {/*/ > */}
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: token.colorBgContainer }}>
          <Flex className="h-full" align="center" justify="space-between">
            <Dropdown menu={menuProps}>
              <Button>
                <Space>
                  TestButton
                  <DownOutlined />
                </Space>
              </Button>
            </Dropdown>
          </Flex>
        </Header>
        <Content style={{ margin: '0 16px' }}>
          // 此处能够根据antd的样式降权使用 m-auto
          <Flex vertical className="h-full w-3/4 m-auto bg-zinc-300">
            <Flex className="mx-auto grow" vertical gap="middle">
              Top
            </Flex>
            <div>Down</div>
            {/* <ChatSender /> */}
          </Flex>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>

但如果组件内引入@ant-design/x后会导致Antd的组件，如Button Flex Layout样式失效:

 <Layout style={{ minHeight: '100vh' }}>
      <Sider style={{ background: token.colorBgContainer }} trigger={null}>
        <div className="demo-logo-vertical" />
        <Conversations
          items={items}
          defaultActiveKey="item1"
          style={{
            background: token.colorBgContainer,
            borderRadius: token.borderRadius,
          }}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: token.colorBgContainer }}>
          <Flex className="h-full" align="center" justify="space-between">
            <Dropdown menu={menuProps}>
              <Button>
                <Space>
                  TestButton
                  <DownOutlined />
                </Space>
              </Button>
            </Dropdown>
          </Flex>
        </Header>
        <Content style={{ margin: '0 16px' }}>
          <Flex vertical className="h-full w-3/4 m-auto bg-zinc-300">
            <Flex className="mx-auto grow" vertical gap="middle">
              Top
            </Flex>
            {/* <div>Down</div> */}
            <ChatSender />
          </Flex>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>

当前行为

No response

预期行为

No response

上下文

No response

版本

1.0.5

您在哪些浏览器上遇到了这个问题？

No response

[petercat-assistant[bot]]

您提到在使用 @ant-design/x 时，Antd 组件的样式失效的问题。这个问题可能与样式的优先级和加载顺序有关。以下是一些可能的解决方案：

1. 检查样式加载顺序：

   • 确保 tailwindcss 和 antd 的样式在正确的顺序中加载。通常情况下，antd 的样式应该在 tailwindcss 之后加载，以确保 tailwindcss 的样式优先级更高。

2. 使用 CSS Modules：

   • 如果可能，尝试使用 CSS Modules 来隔离样式，避免全局样式冲突。

3. 调整 @layer 的顺序：

   • 您可以尝试调整 @layer 的顺序，确保 antd 的样式在 tailwindcss 之后被应用。

4. 检查 @ant-design/x 的样式：

   • 检查 @ant-design/x 是否引入了任何可能覆盖 antd 样式的全局样式。

5. 使用 !important：

   • 在某些情况下，您可以使用 !important 来强制样式优先级，但这通常是最后的手段。

如果这些方法都无法解决问题，建议您在 @ant-design/x 的 GitHub 仓库中查看是否有相关的 issue 或者提交一个新的 issue 以获得更具体的帮助。

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[liuyun1993]

给个临时方法，给@ant-design/x 包建个patch。注释掉相关代码，再自己指定顺序。 文件路径：/es/theme/genStyleUtils.js、/lib/theme/genStyleUtils.js

layer:{
  name: 'antdx',
  dependencies: ['antd'] // 注释掉这一行
}

[985563349]

一个有效的临时 hack 的方案：

<StyleProvider container={document.body} layer> <ConfigProvider theme={{}}> {children} </ConfigProvider> </StyleProvider>

把样式插到 body 中去

[nadavhalfon]

Hey, still no official solution?

[guclan]

一个有效的临时 hack 的方案：

<StyleProvider container={document.body} layer> <ConfigProvider theme={{}}> {children} </ConfigProvider> </StyleProvider>

把样式插到 body 中去

成功解决