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/> 之间交替颜色?