【MUI】ラベル下の空白（ノッチ）を消す

こんにちは、フリーランスエンジニアの太田雅昭です。

前提

• @mui/material: ^7.3.2

MUIのノッチ

MUIではラベルの下に空白ができることがあります。ラベルが重なっている時にはちょうど合っていて良いのですが、ラベルが重なっていないにも関わらずノッチが発生することもあります。明らかにバグだと思うのですが、いまだに改善されません。

テーマで一気にノッチを外す

ノッチはプロパティでnotch=falseにすれば解消されます。Selectの場合は、OutlinedInputに指定します。

import { createTheme, OutlinedInput } from '@mui/material';
import { appColors, appSizes } from "@localrepo/shared/styleConfigs.ts";


export const theme = createTheme({
  components: {
    MuiTextField: {
      defaultProps: {
        InputProps: {
          notched: false
        }
      },
    },
    MuiOutlinedInput: {
      defaultProps: {
        notched: false,
      },
    },
  }
});