Published on

How to Change Border Radius of TextField in Material-UI React

Authors
  • Name
    Ripal & Zalak
    Twitter

How to Change Border Radius of a TextField in Material-UI React

Material-UI (MUI) provides a powerful set of UI components for React, including TextField. However, customizing certain properties, like borderRadius, requires understanding how MUI handles styles.

By default, MUI's TextField comes with a border radius of 4px, but you can change it using several methods.

1. Using sx Prop (Recommended)

The sx prop allows inline customization with MUI's styling system:

<TextField
  label="Enter your name"
  variant="outlined"
  InputProps={{
    sx: {
      borderRadius: 0, // Remove border radius
    },
  }}
/>

2. Using style in InputProps

You can also apply inline styles within InputProps:

<TextField
  label="Enter your name"
  variant="outlined"
  InputProps={{
    style: {
      borderRadius: '10px', // Custom border radius
    },
  }}
/>

3. Using MUI styled API

For a more scalable solution, use the styled API to create a reusable custom component:

import { styled } from '@mui/material/styles'
import TextField from '@mui/material/TextField'

const CustomTextField = styled(TextField)({
  '& .MuiOutlinedInput-root': {
    borderRadius: 0, // Remove border radius
  },
})

export default function App() {
  return <CustomTextField label="Enter your name" variant="outlined" />
}

4. Overriding MUI Theme (Global Change)

If you want to apply a border-radius change globally for all TextField components, modify the theme:

import { createTheme, ThemeProvider } from '@mui/material/styles'
import TextField from '@mui/material/TextField'

const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          borderRadius: 0, // Apply to all TextFields
        },
      },
    },
  },
})

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <TextField label="Enter your name" variant="outlined" />
    </ThemeProvider>
  )
}

Why borderRadius in inputProps Doesn't Work?

  • inputProps applies styles to the native input element, not the MUI TextField container.
  • The outer wrapper of TextField is MuiOutlinedInput-root, which controls the styling.
  • Use InputProps instead for MUI-specific styling.