Как изменить ширину радио кнопки по умолчанию в пользовательском интерфейсе материала

Question

Я использую пользовательский интерфейс материала, группу радиокнопок и группу радиокнопок и хочу изменить ширину радиокнопки по умолчанию (для нее требуется ширина 48 пикселей). Я хочу изменить ее на 30 пикселей,

Пожалуйста, проверьте скриншот.

Answer 1

Ширина является результатом 24px для значка, а затем отступом 9px с каждой стороны (24 + 18 = 42) для текущей версии (v4.4.3) и заполнением 12px с каждой стороны в v3 (24 + 24)= 48).

Чтобы получить ширину 30 пикселей, вы должны настроить отступ на 3 пикселя (24 + 6 = 30).

Вы можете управлять этим в теме, переопределяя MuiRadio-свойство корневого отступа:

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>