Storybook 仅加载 Emotion Styling 第一次加载

Posted 2023-02-19

【中文标题】Storybook 仅加载 Emotion Styling 第一次加载

【英文标题】：Storybook only loading Emotion Styling first load

【发布时间】：2021-05-16 16:05:48

【问题描述】：

我正在使用来自emotion 的styled api 创建样式按钮。

const StyledButton = styled(Button)`
  background-color: $theme.palette.grey['800'];
  width: 50;
  height: 50;
  &:hover 
    background-color: $theme.palette.grey['600'];
  
  & .MuiButton-label 
    color: #fff;
  
`;

但是，当我在 Storybook 中公开它时，我只看到样式出现在第一个组件渲染上

当我更改组件时，样式会消失（来自计算属性和视觉表示）

当我重新加载实际页面时，样式会重新出现...有什么想法吗？

【参考方案1】：

在写问题的时候我想出了答案：P...有a note from MaterialUI关于注入优先级，所以我做了一个自定义装饰器

export const withInjection = (story) => (
  <StylesProvider injectFirst>
     story() 
  </StylesProvider>
)

并添加到我的preview.ts

// style priority injection
addDecorator(withInjection);

现在它一直在工作:)