How can I change the border radius of a TextField in Material-UI React?


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:

    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 } }}

Leave a Reply Cancel reply