Im trying to customize the border radius of a TextField in MUI, but nothing is working. This is how it looks:
enter image description here

It comes with a borderRadius of 4px and Im trying to change it to 0px.

This is how my code Looks:

<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",
    },
  }
}
        />

The rest of the styles are working. But for some reason, borderRadius is not.

I have also tried the sx property and style property, but neither is working.

>Solution :

Use InputProps, not inputProps (see the API reference)

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

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