Skip to content

🧐[问题] electron 中使用 antd-style 时,提供是 StyleProvider 不符合预期? #187

@Wxh16144

Description

@Wxh16144

问题一:

如下代码,我的 <MyTest /> 组件写了两段 cssinjs代码,并且 StyleProvider 添加了 speedycontainer, 其中 antd 的组件 Button 的样式被正确的插入到了 body 下,但是 antd-style 用 emotion 生成的样式并没有插入。

问题二:

使用 <ThemeProvider themeMode="dark"> 方式,将主题改成dark 后, 发现 head 插入的标签有两种样式,一个是 light 主题,一个是 dark 主题。(如图)

Image
  1. 针对上面的问题,我尝试 debug 一个 vite 项目,是能正确插入的。都符合预期
  2. 一开始以为是antd 版本过低,后面升级到最新 5.24.1 问题同样存在
  3. 也以为是 antd 和 antd-style 依赖的 cssinjs 版本不一致 用 npm overrides 方式覆盖后, 发现还是存在

我也没啥思绪了,反馈过来看看社区有没有类似的问题,或者 @arvinx 作者大佬帮忙看看~ 提前感谢

💻 示例代码

repo: https://github.com/Wxh16144/test-electron-app-cssinjs

import { createStyles, StyleProvider, ThemeProvider } from 'antd-style';
import { Button } from 'antd';

const useStyle = createStyles(({ css, token }) => ({
  card: css({
    background: token.colorBgContainer,
    color: token.colorTextBase,
  }),
  box: css({
    border: `5px solid ${token.colorBorder}`,
  }),
}));

function MyTest() {
  const slogan = `魔法师正在进行最后的仪式,为您带来一项惊艳功能`;

  const { styles } = useStyle();

  return (
    <div className={styles.box}>
      <h3 className={styles.card}>{slogan}</h3>
      <code hidden>src/App.tsx</code>
      <div>
        <div>1</div>
        <div>2</div>
      </div>
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
  );
}

export default function App() {
  return (
    <StyleProvider speedy container={document.body}>
      <ThemeProvider themeMode="dark">
        <MyTest />
        <Button type="primary">ABC</Button>
      </ThemeProvider>
    </StyleProvider>
  );
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions