【MUI】styled()内でのtheme.typographyの指定方法

はじめに

theme.typographyで文字サイズ等をまとめて管理したい、inputの入力文字サイズとかもtheme.typographyで指定したいとなったのでやってみた。
https://mui.com/system/styled/
https://mui.com/customization/typography/

通常のTypography（のvariant）指定

<Typography variant="">hoge</Typography>でok

styled内でのTypography指定

input内の文字サイズを指定したいときなどに
<Typography variant="">hoge</Typography>を使うことができない。
その場合は、styledを利用してその中で下記のように指定する。

const MyTextField = styled(TextField)(({ theme }) => ({
  color: theme.palette.primary.main,
  '& .MuiInputBase-input': {
      ...theme.typography.h5,
  },
}));

サンプルコード

import * as React from 'react';
import {
  createTheme,
  responsiveFontSizes,
  ThemeProvider,
} from '@mui/material/styles';
import { Typography, TextField } from '@mui/material';

let theme = createTheme();
theme = responsiveFontSizes(theme); 

const MyTextField = styled(TextField)(({ theme }) => ({
  color: theme.palette.primary.main,
  '& .MuiInputBase-input': {
      ...theme.typography.h5,
  },
}));

export default function MyTypographyComponent() {
  return (
    <div>
      <ThemeProvider theme={theme}>
        <Typography variant="h3">Responsive h3</Typography>
        <MyTextField/>
      </ThemeProvider>
    </div>
  );
}

※ ちなみにresponsiveFontSizesを使うとmui側で設定されたレスポンシブなサイズを付与できる。
https://mui.com/customization/typography/#responsive-font-sizes