Material-UI injectionFirst 不适用于故事书

Posted

技术标签:

【中文标题】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,具体取决于您的设置方式(我们没有)。

【讨论】:

以上是关于Material-UI injectionFirst 不适用于故事书的主要内容,如果未能解决你的问题,请参考以下文章

Material-UI 无法解析 '@material-ui/core/styles/createMuiTheme

ReactJS + Material-UI:如何减小 Material-UI 的 <TableRow/> 的列宽?

ReactJS + Material-UI:如何在每个 TableRow 中使用 Material-UI 的 FlatButton 和 Dialog?

material-ui:找不到模块:'./AccessAlarm'

ReactJS + Material-UI:如何使用 Material-UI 的 <DatePicker> 将当前日期设置为默认值?

ReactJS + Material-UI:如何在 Material-UI <Table/> 的 <TableRow/> 之间交替颜色?