如何更改 Material UI 中单选按钮的默认宽度

Question

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

请检查截图。

Answer 1

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

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

Answer 2

宽度是图标的 24px，然后当前版本 (v4.4.3) 每边 9px 的内边距 (24 + 18 = 42) 和 v3 中每边 12px 的内边距 (24 + 24 = 48) 的结果。

要获得 30 像素的宽度，应将内边距调整为 3 像素 (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>