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.

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.

• javascript
• reactjs
• material-ui

2 Answers 2

Use InputProps, not inputProps (see the API reference)

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

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

To change the border radius of a TextField in mui React, you can use the borderRadius property in the TextField's InputProps object.

Here is an example:

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