时间戳

首页 > 解决方案 > Material-UI injectionFirst 不适用于故事书

reactjs - Material-UI injectionFirst 不适用于故事书

问题描述

我正在使用带有 styled-components 的 material-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 之前 styled-components 样式属性还在 JSS 之前

标签： reactjsmaterial-uistyled-componentsstorybook

解决方案

我没有使用 styled-components，但是对于带有 Storybook v6 的 MUI + CSS Modules，下面的配置可以做到，所以 MUI 样式不会覆盖我们自己的样式。

.storybook/preview.js：

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

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

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

推荐阅读