Material-UI injectFirst 不适用于故事书

Question

我正在使用带有样式组件的材料 UI，根据文档，为了覆盖材料样式，需要添加此injectFirst属性：

然而，当尝试在 storybook 环境中使用这种方法时，它不会按预期工作，并且 JSS 样式仍然在样式组件之后注入。

.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 之前

Answer 1

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

.storybook/preview.js：

import { StylesProvider } from '@material-ui/styles'

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

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