9
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

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

9
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?