Material-UIのTextFieldのボーダー色を変更する

Material-UIのTextFieldのボーダー色を変更する方法。

TextFieldのcolorプロパティで指定できる色はフォーカス時のみ。
通常状態のボーダーやラベル(プレースホルダ)の色を変えるプロパティが用意されていないのでCSSで変更した。

import { TextField } from '@mui/material'
import { styled } from '@mui/material/styles'

const myStyle = {
  '& .MuiInputBase-input': {
    color: '#000000',    // 入力文字の色
  },
  '& label': {
    color: '#AAAAAA', // 通常時のラベル色 
  },
  '& .MuiInput-underline:before': {
    borderBottomColor: '#CCCCCC', // 通常時のボーダー色
  },
  '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
    borderBottomColor: '#DDDDDD',  // ホバー時のボーダー色
  },
  '& .MuiOutlinedInput-root': {
    '& fieldset': {
      borderColor: '#CCCCCC',    // 通常時のボーダー色(アウトライン)
    },
    '&:hover fieldset': {
      borderColor: '#DDDDDD',    // ホバー時のボーダー色(アウトライン)
    },
  },
}

export const MyTextField = styled(TextField)(myStyle)

↓こっちの書き方でもいける。

import { TextField } from '@mui/material'

const myStyle = {
  '& .MuiInputBase-input': {
    color: '#000000',    // 入力文字の色
  },
  '& label': {
    color: '#AAAAAA', // 通常時のラベル色 
  },
  '& .MuiInput-underline:before': {
    borderBottomColor: '#CCCCCC', // 通常時のボーダー色
  },
  '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
    borderBottomColor: '#DDDDDD',  // ホバー時のボーダー色
  },
  '& .MuiOutlinedInput-root': {
    '& fieldset': {
      borderColor: '#CCCCCC',    // 通常時のボーダー色(アウトライン)
    },
    '&:hover fieldset': {
      borderColor: '#DDDDDD',    // ホバー時のボーダー色(アウトライン)
    },
  },
}

export const MyTextField = (
  <TextField sx={myStyle} />
)