Material-UI的TextField输入框样式怎么自定义不生效？

码农卫红提问于 2026-03-23 14:59:20 阅读 15

组件

我用Material-UI的TextField组件，想改一下输入框的边框颜色和高度，但加了sx或者styled好像都没反应，是不是被默认样式覆盖了？

试过在sx里写borderColor，也试过用styled包装，但样式就是不生效。控制台也没报错，就是原样不动。

.custom-input input {
  border-color: #ff4081 !important;
  height: 48px;
}

我来解答赞 11 收藏

反馈

1 条解答

Mr.红霞 Lv1

我之前也遇到过，Material-UI的TextField内部结构复杂，得具体针对input元素用sx。试试这样：

import TextField from '@mui/material/TextField';




  sx={{

    '& .MuiOutlinedInput-root': {

      '& fieldset': {

        borderColor: '#ff4081',

      },

      '&.Mui-focused fieldset': {

        borderColor: '#ff4081',

      },

      '& input': {

        height: 48,

      },

    },

  }}

/>

2026-03-23 15:00