问题一:
如下代码,我的 <MyTest /> 组件写了两段 cssinjs代码,并且 StyleProvider 添加了 speedy 和 container, 其中 antd 的组件 Button 的样式被正确的插入到了 body 下,但是 antd-style 用 emotion 生成的样式并没有插入。
问题二:
使用 <ThemeProvider themeMode="dark"> 方式,将主题改成dark 后, 发现 head 插入的标签有两种样式,一个是 light 主题,一个是 dark 主题。(如图)
- 针对上面的问题,我尝试 debug 一个 vite 项目,是能正确插入的。都符合预期
- 一开始以为是antd 版本过低,后面升级到最新 5.24.1 问题同样存在
- 也以为是 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>
);
}
问题一:
如下代码,我的
<MyTest />组件写了两段 cssinjs代码,并且 StyleProvider 添加了speedy和container, 其中 antd 的组件 Button 的样式被正确的插入到了 body 下,但是 antd-style 用 emotion 生成的样式并没有插入。问题二:
使用
<ThemeProvider themeMode="dark">方式,将主题改成dark 后, 发现 head 插入的标签有两种样式,一个是 light 主题,一个是 dark 主题。(如图)我也没啥思绪了,反馈过来看看社区有没有类似的问题,或者 @arvinx 作者大佬帮忙看看~ 提前感谢
💻 示例代码
repo: https://github.com/Wxh16144/test-electron-app-cssinjs