reactjs - 无法在 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由于某种原因，没有应用来自的样式。具体来说font-family。我在这里想念什么？

标签： reactjsmaterial-uistorybook

Answer 1

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

本文对使用 Storybook 和 Material UI 的配置首选项很有帮助。

故事书/MaterialUI/StyledComponents

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

样式-decorator.js

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

配置.js

addDecorator(StylesDecorator)

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

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