Failing to apply material ui overrides in storybook in React app - reactjs

Question

In my app I am using React material-ui and I am heavily relying on storybooks. However, I have some overrides of themes settings.
Here is the settings:
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",
},
});
Now, in some of the components when I create a storybook and wrapping with ThemeProvider it works perfectly fine. Like in this component:
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>
);
};
And here is it's storybook:
const contactBox = () => (
<ThemeProvider theme={edvengoTheme}>
<div style={{ width: '300px', border: '5px solid lightgray', backgroundColor: 'lightgray' }}>
<InPageContactBox
phone={text('Phone #', '[phone]')}
email={text('Email', 'contact#edvengo.com')}
skype={text('Skype', 'shurik_a')}
buttonUrl={text('Button Url', 'http://google.coms')}
/>
</div>
</ThemeProvider>
);
storiesOf('Web|Common', module)
.addDecorator(withKnobs)
.add('Contact Box', contactBox);
The problem begins here...
One of my components look like this:
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>
);
};
with a storybook as follows:
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);
For some reason, the styling from the edvengoTheme are not applied. Specifically font-family.
What am I missing here?

Answer 1

I encountered a similar issue where my dev environment was not the same as the build/deployed version.
This article was helpful for config preferences using Storybook & Material UI.
Storybook/MaterialUI/StyledComponents
In short, some important storybook configuration should include:
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);
In your case, you may just be missing StyleProvider 'injectFirst' inside of your ThemeProvider