我如何在material - uireact中改变TextField的边界半径?

Question

我试图在MUI中自定义TextField的边界半径，但没有任何工作。它看起来是这样的:输入图片描述

它的边界半径为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

Answer 2

要在mui React中改变TextField的边界半径，可以在TextField的InputProps对象中使用borderRadius属性。

下面是一个例子:

<TextField
label="Enter your name"
InputProps={{
style: {
borderRadius: "10px",
}
}}
/>