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} />
)