未能在React应用程序的故事书中应用材料ui覆盖

Question

在我的应用程序中，我使用React material ui，并且严重依赖故事书。然而，我有一些主题设置的覆盖。

以下是设置：

import { createMuiTheme } from '@material-ui/core/styles';
export const egColorScheme = {
darkGray: '#494949',
transparent: 'transparent',
white: '#FFF',
};
const edvengoFont = {
fontFamily: "'Montserrat', sans-serif",
};
export const edvengoTheme = createMuiTheme({
overrides: {
MuiCssBaseline: {
'@global': {
'@font-face': [edvengoFont],
},
},
},
typography: {
fontFamily: "'Montserrat', sans-serif",
},
});

现在，在一些组件中，当我创建一本故事书并用ThemeProvider包装时，它可以非常好地工作。类似于此组件：

import { createStyles, List, ListItem, ListItemIcon, ListItemText, Theme } from '@material-ui/core';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import makeStyles from '@material-ui/core/styles/makeStyles';
import Typography from '@material-ui/core/Typography';
import React from 'react';
import { egColorScheme } from '../../../../utils/styles/edvengo-theme';
import { EgButtonOutlined } from '../EgButton';
import { EmailIcon, PhoneIcon, SkypeIcon } from '../Icons';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
actions: {
marginTop: '10px',
paddingBottom: '30px',
paddingLeft: '30px',
},
content: {
padding: '30px 30px 0',
},
itemIcon: {
minWidth: '16px',
paddingRight: '11px',
},
itemText: {
color: egColorScheme.darkGray,
fontSize: '14px',
fontStyle: 'normal',
fontWeight: 'normal',
letterSpacing: '0.02em',
},
list: {
marginTop: '10px',
},
root: {
backgroundColor: egColorScheme.white,
borderRadius: '10px',
width: '100%',
},
title: {
color: egColorScheme.darkGray,
fontSize: '22px',
fontStyle: 'normal',
fontWeight: 'bold',
lineHeight: '27px',
},
}),
);
export interface InPageContactBoxProps {
phone?: string;
email?: string;
skype?: string;
buttonUrl?: string;
}
export const InPageContactBox: React.FC<InPageContactBoxProps> = ({ phone, email, skype, buttonUrl }) => {
const styles = useStyles();
return (
<Card className={styles.root} elevation={0}>
<CardContent className={styles.content}>
<Typography gutterBottom variant="h5" component="span" className={styles.title}>
Contact Us
</Typography>
<List className={styles.list}>
{phone ? (
<ListItem component={'a'} href={`tel:${phone}`} disableGutters={true}>
<ListItemIcon className={styles.itemIcon}>
<PhoneIcon />
</ListItemIcon>
<ListItemText className={styles.itemText} primary={phone} />
</ListItem>
) : (
<></>
)}
{email ? (
<ListItem component={'a'} href={`mailto:${email!}`} target={'_blank'} disableGutters={true}>
<ListItemIcon className={styles.itemIcon}>
<EmailIcon />
</ListItemIcon>
<ListItemText className={styles.itemText} primary={email} />
</ListItem>
) : (
<></>
)}
{skype ? (
<ListItem component={'a'} href={`skype:${skype!}?chat`} disableGutters={true}>
<ListItemIcon className={styles.itemIcon}>
<SkypeIcon />
</ListItemIcon>
<ListItemText className={styles.itemText} primary={skype} />
</ListItem>
) : (
<></>
)}
</List>
</CardContent>
<CardActions className={styles.actions}>
<EgButtonOutlined href={buttonUrl}>Submit Message</EgButtonOutlined>
</CardActions>
</Card>
);
};

这是它的故事书：

const contactBox = () => (
<ThemeProvider theme={edvengoTheme}>
<div style={{ width: '300px', border: '5px solid lightgray', backgroundColor: 'lightgray' }}>
<InPageContactBox
phone={text('Phone #', '[phone]')}
email={text('Email', '[e-mail]')}
skype={text('Skype', 'shurik_a')}
buttonUrl={text('Button Url', 'http://google.coms')}
/>
</div>
</ThemeProvider>
);
storiesOf('Web|Common', module)
.addDecorator(withKnobs)
.add('Contact Box', contactBox);

问题从这里开始。。。

我的一个组件看起来像这样：

import { createStyles, Paper, Theme } from '@material-ui/core';
import Link from '@material-ui/core/Link';
import makeStyles from '@material-ui/core/styles/makeStyles';
import React from 'react';
import { egColorScheme } from '../../../../utils/styles/edvengo-theme';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
backgroundColor: egColorScheme.white,
borderRadius: '10px',
display: 'flex',
height: '100%',
overflow: 'hidden',
},
title: {
alignItems: 'center',
color: egColorScheme.darkGray,
fontSize: '22px',
fontStyle: 'normal',
fontWeight: 'bold',
lineHeight: '28px',
padding: '36px 23px',
textAlign: 'center',
textDecoration: 'none',
width: '100%',
},
}),
);
export interface TitleBlockProps {
title: string;
href?: string;
}
export const TitleBlock: React.FC<TitleBlockProps> = ({ title, href }) => {
const styles = useStyles();
return (
<Paper className={styles.root} elevation={0}>
<Link className={styles.title} href={href}>
{title}
</Link>
</Paper>
);
};

故事书如下：

import { ThemeProvider } from '@material-ui/core/styles';
import { text, withKnobs } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React from 'react';
import { edvengoTheme } from '../../../../utils/styles/edvengo-theme';
import { TitleBlock } from './TitleBlock';
const titleBlock = () => (
<ThemeProvider theme={edvengoTheme}>
<div style={{ width: '300px', border: '5px solid lightgray', backgroundColor: 'lightgray' }}>
<TitleBlock title={text('Title', 'Ontario')} href={text('Url', 'http://edvengo.com')} />
</div>
</ThemeProvider>
);
storiesOf('Web|Common', module)
.addDecorator(withKnobs)
.add('Title Block', titleBlock);

由于某些原因，edvengoTheme中的样式不适用。特别是CCD_ 3。我在这里错过了什么？

Answer 1

我遇到了一个类似的问题，我的开发环境与构建/部署版本不同。

这篇文章对使用Storybook&材料UI。

故事书/材料界面/样式组件

简而言之，一些重要的故事书配置应该包括：

styles-decorator.js

export const StylesDecorator = storyFn => (
<ThemeProvider theme={customTheme}>
<StylesProvider injectFirst>
{storyFn()}
</StylesProvider>
</ThemeProvider>
);

config.js

addDecorator(StylesDecorator)
configure(require.context('../src/stories', true, /.stories.js$/), module);

在您的情况下，您可能只是在ThemeProvider中缺少StyleProvider'injectFirst