Material-UI injectionFirst 不适用于故事书

Posted 2023-02-19

【中文标题】Material-UI injectionFirst 不适用于故事书

【英文标题】：Material-UI injectFirst doesn't work with storybook

【发布时间】：2020-02-25 11:37:36

【问题描述】：

我正在使用带有 styled-components 的 Material-UI，并且根据 documentation，为了覆盖材质样式，需要添加此 injectFirst 属性：

但是，当尝试在 storybook 环境中使用这种方法时，它无法按预期工作，并且 JSS 样式仍然在 styled-components 之后注入。

.storybook/config.js：

import React from 'react'
import configure, addDecorator from '@storybook/react'
import  StylesProvider  from '@material-ui/styles'

addDecorator(storyFn => (
    <StylesProvider injectFirst>
         storyFn() 
    </StylesProvider>
));
const req = require.context('../packages', true, /.story.js$/);

function loadStories() 
    req.keys().forEach((filename) => req(filename));


configure(loadStories, module);

DOM： styled-components 样式属性还在 JSS 之前

【问题讨论】：

很遗憾这对你没有用，因为你的代码解决了我的问题，让 Material UI 与我的 CSS 模块一起工作。

【参考方案1】：

我没有使用样式化组件，但是对于带有 Storybook v6 的 MUI + CSS 模块，下面的配置使得 MUI 样式不会覆盖我们自己的样式。

.storybook/preview.js：

import  StylesProvider  from '@material-ui/styles'

export const decorators = [
  (Story) => (
    <StylesProvider injectFirst>
      Story()
    </StylesProvider>
  ),
]

我们在该文件中从另一个附加组件中退出了parameters 的配置，我只是将上面的代码放在那里没有问题。您可能还需要在其中导入 React，具体取决于您的设置方式（我们没有）。