CODEWITHSUNDEEP
reactjsmaterial-ui
Nitin Shinde
Nitin Shinde

Reputation: 1244

How to change default width of Radio button in Material UI

I am using Material UI and radio button and radio button group, and i want to change radio button default width (It is taking 48px width ) I want to change it to 30px,

enter image description here

Please check screenshot.

Upvotes: 5

Views: 8402

Answers (2)

Shraddha Yadav
Shraddha Yadav

Reputation: 132

Size of the radio button can changed by providing below code at root.

root: {
"& .MuiSvgIcon-root": {
      height: 15,
      width: 15,
    }
}

Upvotes: 6

Ido
Ido

Reputation: 5768

The width is the result of 24px for the icon and then padding of 9px on each side (24 + 18 = 42) for the current version (v4.4.3) and padding of 12px on each side in v3 (24 + 24 = 48).

To get a width of 30px, you should adjust the padding to 3px (24 + 6 = 30).

You can control this in the theme by overriding the MuiRadio-root padding property:

import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';

const theme = createMuiTheme({
  overrides: {
    MuiRadio: {
      root: {
        padding: 3
      }
    }
  }
});

And then wrap your component with ThemeProvider:

  <ThemeProvider theme={theme}>
      YOUR_COMPONENT
  </ThemeProvider>

Edit Smaller Radio

Upvotes: 5

Related Questions