如何在材质UI中更改单选按钮的默认宽度

Question

我正在使用Material UI，单选按钮和单选按钮组，并且我想更改单选按钮的默认宽度（采用48px width），我想将其更改为30px，

请检查屏幕截图。

Answer 1

可以通过在根目录下提供以下代码来更改单选按钮的大小。

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

Answer 2

宽度是图标的24px的结果，然后是当前版本（v4.4.3）的每侧填充9px（24 + 18 = 42），而v3中的每侧填充12px（24 + 24） = 48）。

要获得30px的宽度，您应该将填充调整为3px（24 + 6 = 30）。

您可以通过覆盖MuiRadio-root padding属性在主题中对此进行控制：

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

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

然后用ThemeProvider包装您的组件：

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