如何修改React Material-UI中TextField组件的边框圆角？

我尝试修改MUI TextField组件的边框圆角（默认4px改为0px），但始终不生效。其他样式（宽度、边框、内边距、字体等）都能正常应用，只有borderRadius没效果。试过在inputProps.style、sx属性、组件直接加style属性这几种方式，都没用。

我的代码如下：

<TextField  
    id="time"
    type="time"
    inputProps={{
    step: 300, // 5分钟
    style: {
      width: "225px",
      border: "1px solid #EAEAEA",
      borderRadius: "0",
      padding: "8px 0 8px 8px",
      fontFamily: "Roboto",
      fontSize: "14px",
    },
  }
}
/>

问题原因 #

MUI的TextField（默认variant="outlined"）的边框样式是由外层的OutlinedInput组件下的.MuiOutlinedInput-notchedOutline元素控制的，不是直接作用在input原生元素上，所以你在inputProps里设置borderRadius不会生效。

解决方法 #

方法1：通过sx属性直接修改目标元素样式 #

直接在TextField的sx属性中选中对应的类名，修改圆角和边框样式，同时处理hover、focus状态避免样式不一致：

<TextField  
    id="time"
    type="time"
    inputProps={{
      step: 300, // 5分钟
      style: {
        width: "225px",
        padding: "8px 0 8px 8px",
        fontFamily: "Roboto",
        fontSize: "14px",
      },
    }}
    sx={{
      '& .MuiOutlinedInput-notchedOutline': {
        borderRadius: 0,
        border: '1px solid #EAEAEA'
      },
      '&:hover .MuiOutlinedInput-notchedOutline': {
        borderColor: '#EAEAEA'
      },
      '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
        borderColor: '#EAEAEA'
      }
    }}
/>

方法2：自定义主题全局覆盖 #

如果需要多个TextField都使用圆角0的样式，可以通过自定义主题统一设置：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const customTheme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-notchedOutline': {
            borderRadius: 0,
          },
        },
      },
    },
  },
});

// 在应用或组件外层包裹ThemeProvider
<ThemeProvider theme={customTheme}>
  <TextField  
    id="time"
    type="time"
    inputProps={{
      step: 300, // 5分钟
      style: {
        width: "225px",
        padding: "8px 0 8px 8px",
        fontFamily: "Roboto",
        fontSize: "14px",
      },
    }}
    sx={{
      '& .MuiOutlinedInput-notchedOutline': {
        border: '1px solid #EAEAEA'
      }
    }}
  />
</ThemeProvider>

方法3：用styled封装自定义组件 #

通过MUI的styled方法创建一个预设样式的TextField组件，后续直接复用：

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

const RoundedZeroTextField = styled(TextField)(({ theme }) => ({
  '& .MuiOutlinedInput-notchedOutline': {
    borderRadius: 0,
    border: '1px solid #EAEAEA',
  },
  '&:hover .MuiOutlinedInput-notchedOutline': {
    borderColor: '#EAEAEA',
  },
  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
    borderColor: '#EAEAEA',
  },
}));

// 使用时直接调用自定义组件
<RoundedZeroTextField  
    id="time"
    type="time"
    inputProps={{
      step: 300, // 5分钟
      style: {
        width: "225px",
        padding: "8px 0 8px 8px",
        fontFamily: "Roboto",
        fontSize: "14px",
      },
    }}
/>

内容的提问来源于stack exchange，提问作者Alberto Enríquez