🐛[BUG]nextjs app router，createStyles在服务端未生成style标签导致页面闪烁。

[杨骐彰]

🐛 bug 描述

使用antd + nextjs app router，根据官方配置了AntdRegistry, 但单独使用ant-style的createStyles在服务端未生成<style>导致页面闪烁，而antd的组件的样式是正常渲染的。

style是在客户端渲染后插入的，服务端未返回

📷 复现步骤

1. 按照官方教程启动antd+nextjs
2. 使用createStyles创建自定义样式

🏞 期望结果

createStyles 创建的样式能在服务端渲染阶段正常提取和返回。

💻 复现代码

const useStyles = createStyles(({ token }) => {
  return {
    item: {
      height: 45,
      borderBottom: 'solid 1px',
      borderBottomColor: token.colorBorderSecondary,
      '&:hover': {
        background: token.colorBgTextHover,
      },
    },
  };
});

function Item({ name }: { name: string }) {
  const { styles } = useStyles();
  return (
    <Row align="middle" className={styles.item} gutter={8}>
      <Col span={10}>{name}</Col>
      <Col span={4}>20</Col>
      <Col span={4}>10</Col>
      <Col span={6} style={{ textAlign: 'right' }}>
        <Button size="small" type="primary">
          挂号
        </Button>
      </Col>
    </Row>
  );
}

© 版本信息

• antd-style 版本: 3.6.1
• 浏览器环境 : edge 最新版
• 开发环境 mac OS

🚑 其他信息

服务端渲染：

客户端渲染后：

[杨骐彰]

解决了，AntdRegistry集成的是@antdesign/cssinjs。ant-style还要单独集成一遍。

晕死，为啥要搞2套cssinjs哦？😓

[Arvin Xu]

antd 只解决 antd 组件里自己的样式抽取问题。比如用户是 antd + sass，那么只需要集成 ant-design/cssinjs 就好了。

但 antd-style 是提供的业务应用的 cssinjs 样式方案，使用的是 emotion。如果只用 @ant-design/cssinjs ，就没法提取到业务样式了。
如果你直接用 antd-style 的话，antd-style 的提取已经包含了 antd 的，所以你如果使用 antd-style ，只需要集成 antd-style 的Registry 就行。

[Arvin Xu]

https://ant-design.github.io/antd-style/guide/ssr#app-router

[杨骐彰]

@arvinxx 请问下，antd为什么不直接用ant-style作为底层呢。@ant-design/cssinjs最大的问题是没有提供自定义复杂样式的能力，useToken遇到hover之类的需求就哑火了。个人感觉antd应该像mui一样内置整套样式方案😂

[Arvin Xu]

antd为什么不直接用ant-style作为底层呢。

因为 antd-style 的性能没有 @ant-design/cssinjs 高。组件级的 cssinjs 实现逻辑和业务的实现逻辑不完全一致。详细介绍可以看这里：https://ant-design.antgroup.com/docs/blog/css-in-js-cn

@ant-design/cssinjs最大的问题是没有提供自定义复杂样式的能力

不是不支持，而是你要用这个放方案写样式会麻烦死…这个方案是为了解决以前 cssinjs 遇到的性能问题而为组件库量身定制的，但放到业务场景里不合适。

mui 从组件到应用都一样用一套，最后的社区反馈就是卡…

[杨骐彰]

@arvinxx 明白了，多谢大佬。