如何更改 Material-UI React 中 TextField 的边框半径？

Question

我试图在 MUI 中自定义 TextField 的边框半径，但没有任何效果。这是它的样子： 在此处输入图像描述

它的 borderRadius 为 4px，我试图将其更改为 0px。

这就是我的代码的样子：

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

其余样式均有效。但由于某种原因，borderRadius 不是。

我还尝试了 sx 属性和 style 属性，但都不起作用。

Answer 1

使用InputProps, 不使用inputProps（请参阅API 参考）

InputProps={{ sx: { borderRadius: 0 } }}

https://codesandbox.io/s/compassionate-mahavira-s30k13?file=/demo.tsx