Storybook 仅加载 Emotion Styling 第一次加载答案

【问题标题】：Storybook only loading Emotion Styling first loadStorybook 仅加载 Emotion Styling 第一次加载
【发布时间】：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 中公开它时，我只看到样式出现在第一个组件渲染上

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

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

【问题讨论】：

标签： css typescript material-ui storybook

【解决方案1】：

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

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

并添加到我的preview.ts

// style priority injection
addDecorator(withInjection);

现在它一直在工作:)

【讨论】：