web-dev-qa-db-ja.com

Material-UIを使用してタイポグラフィテーマのデフォルトを通常のタグに適用するにはどうすればよいですか？

だから、私は https://material-ui.com/style/typography/ を読み、Robotoフォントをロードしています。私は次のような単純なコンポーネントを期待します：

const theme = createMuiTheme();

const App = () => {
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <p>Hello world!</p>
    </MuiThemeProvider>
  );
};

roboto（デフォルトのフォント）を使用してpタグのスタイルを設定します。しかし、それは起こりません。コードを次のように変更した場合：

const theme = createMuiTheme();

const App = () => {
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <Typography>Hello world!</Typography>
    </MuiThemeProvider>
  );
};

期待どおりに動作します。タイポグラフィcssと同様にpタグが挿入されます。ライブラリがどのように使用されるのか混乱しています。

  1. すべての通常のhtmlタグをカスタムReact要素に置き換えるというMaterial-UIのアイデアですか？
  2. テーマのタイポグラフィからh1-6、pなどの通常のhtmlタグにスタイルを簡単に適用する方法はありますか？
  3. トップレベルのコンポーネントでwithStylesを使用して、すべての通常のhtml要素を自分でスタイル設定する必要がありますか？
javascripthtmlcssreactjsmaterial-ui
8
btmorex
  1. すべての通常のhtmlタグをカスタムReact要素に置き換えるというMaterial-UIのアイデアですか？

いいえ。マテリアルUI（およびマテリアルデザイン全般）でのタイポグラフィの考え方は、アプリケーションのテーマ全体で一貫したスケールのバリアントを提供することです： https://material.io/design/typography/the-type-system .html＃

次に、以下の2.および3で説明するように、このタイポグラフィスタイルをさまざまな方法で使用できます。

  1. テーマのタイポグラフィからh1-6、pなどの通常のhtmlタグにスタイルを簡単に適用する方法はありますか？

@ Chimera.Zenが回答したように、withStyles HOCを使用して、テーマスタイルとフォントバリアントを任意のreactコンポーネントまたはhtmlタグに適用できます。しかし、JSSスタイルでテーマのタイポグラフィ定義を再利用することで、より便利になるようにする別の方法があります。

const styles = theme => ({
  paragraph: {
    ...theme.typography.body1
  }
});

const MyComponent = props => (
  <p className={props.classes.paragraph}>
    My styles text
  </p>
);
  1. トップレベルのコンポーネントでwithStylesを使用して、すべての通常のhtml要素を自分でスタイル設定する必要がありますか？

あなたは違う。必要に応じて個々のコンポーネントのスタイルを設定できますが、継承を使用し、Paper、Drawerなどのコンテナコンポーネントまたは独自のコンテナコンポーネントのデフォルトスタイルを使用する可能性があります。

アプリケーション全体にデフォルトの「body1」スタイルを適用して、グローバルコンテナコンポーネント（「ルート」や「アプリ」など）を実装できます。

もう1つのアプローチは、MUIの作成者がここで説明しているような「jss-global」プラグインを使用することです https://github.com/mui-org/material-ui/issues/9988#issuecomment-426631645 ：

import { withStyles } from '@material-ui/core/styles';

export default withStyles({
  '@global': {
    body: {
      ...theme.typography.body1
    },
  },
})(() => null);
6
Ricovitch

  1. はい、しかしあなたはそうする必要はありません。

  2. はい、定義されているwithStylesコンポーネントとstylesを使用します。答えの最後にある例を参照してください

  3. Paper、Drawerなどのコンポーネントはテーマのデフォルトを取りますが、これは<MuiThemeProvider>を開始したコンポーネントでも変更できます。通常のHTML要素には、使用されているコンポーネントで定義されたスタイル、またはスタイルシートのクラス名が必要です。

style.rootと言った場合、それをMaterial-UIコンポーネント、div、span、p、a、に適用できます。など。MUIコンポーネントに適用される場合、style.rootのスタイルはデフォルトを上書きします。

Material-UI Paper コンポーネントを例として使用し、styles.paragraphを追加の例として使用します。

const styles = theme => ({
  root: {
    ...theme.mixins.gutters(),
    paddingTop: theme.spacing.unit * 2,
    paddingBottom: theme.spacing.unit * 2,
  },
  paragraph: {
    color: '#FFF',
    textAlign: 'center',
    paddingTop: theme.spacing.unit * 2,
    paddingBottom: theme.spacing.unit * 2,
});

これらのスタイルは、任意の要素に適用できるようになりました

<div className={styles.root}>
  <Paper className={styles.root}>
    <Typography component="p" className={styles.paragraph}>
      Paper can be used to build surface or other elements for your application.
    </Typography>
  </Paper>
</div>
0
Chimera.Zen