MUIでレスポンシブに文字の大きさを変えてみた

実装

 import React from 'react';
import { makeStyles, useTheme } from '@mui/styles';
import TextField from '@mui/material/TextField';
import { createTheme } from '@mui/material';

const useStyles = makeStyles(() => {
  const theme = createTheme({
    breakpoints: {
      values: {
        sm: 600,
        md: 960,
        lg: 1280,
        xl: 1920,
      },
    },
  });
  return {
    textField: {
      width: '100%',
      '& .MuiInputBase-root': {
        fontSize: '1rem',
        [theme.breakpoints.up('sm')]: {
          fontSize: '1.2rem',
        },
        [theme.breakpoints.up('md')]: {
          fontSize: '1.4rem',
        },
        [theme.breakpoints.up('lg')]: {
          fontSize: '1.6rem',
        },
      },
    },
  };
});

export default function ResponsiveForm() {
  const classes = useStyles();

  return (
    <div>
      <TextField className={classes.textField} placeholder="名字" />
      <TextField className={classes.textField} placeholder="名前" />
      <TextField className={classes.textField} placeholder="年齢" />
      <TextField className={classes.textField} placeholder="郵便番号" />
      <TextField className={classes.textField} placeholder="住所" />
      <TextField className={classes.textField} placeholder="所属会社" />
      <TextField className={classes.textField} placeholder="職業" />
      <TextField className={classes.textField} placeholder="性別" />
      <TextField className={classes.textField} placeholder="趣味" />
      <TextField className={classes.textField} placeholder="特技" />
    </div>
  );
}