How can i change TextField border-radius in Mui

Question

I am trying to change mui TextField border radius but it's not working. Can anyone help me to solve this problem.

Here is my code:

<TextField variant="outlined" sx={{ borderRadius: 5 }} />

Can anyone fix it this?

Answer 1

override MuiOutlinedInput-root clasee

 sx={{
      ".MuiOutlinedInput-root": {
        borderRadius: 5 
      }
    }}

Answer 2

Try this

<TextField
    className="inputRounded"
    placeholder="Search"
    variant="outlined"
    size="small"
  />
</div>