Mui TextFieldの高さをカスタマイズする方法

1. CSSを使用した高さのカスタマイズ: Mui TextFieldの高さを変更するには、CSSを使用してスタイルを適用します。以下のコードは、TextFieldのクラス名を指定して高さをカスタマイズする例です。

.customTextField {
  height: 50px; /* 好みの高さに変更 */
}

import TextField from '@mui/material/TextField';
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles({
  customTextField: {
    height: '50px', // CSSで指定したクラス名を使用
  },
});
function CustomTextField() {
  const classes = useStyles();
  return (
    <TextField
      className={classes.customTextField}
      label="カスタムTextField"
    />
  );
}

2. Muiのテーマを使用した高さのカスタマイズ: もう一つの方法は、Muiのテーマを使用してTextFieldの高さをカスタマイズすることです。以下のコードは、Muiのテーマを作成し、TextFieldの高さをテーマで指定する例です。

import { createTheme, ThemeProvider } from '@mui/material/styles';
import TextField from '@mui/material/TextField';
const theme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          height: '50px', // 好みの高さに変更
        },
      },
    },
  },
});
function CustomTextField() {
  return (
    <ThemeProvider theme={theme}>
      <TextField label="カスタムTextField" />
    </ThemeProvider>
  );
}