CSS Базовая линия пользовательского интерфейса материала уменьшает размеры моих компонентов и меняет круги на эллипсы.

Question

Я хотел добавить в свое приложение React функцию темного режима, использующего Material UI. Итак, я направился к документации и сослался на несколько сообщений stackoverflow, а также сделал следующее:

const MaterialTheme = ({ children, colorTheme, darkMode }) => {
    const mode = darkMode ? 'dark' : 'light';

    const theme = React.useMemo(() => {
        const {
            primaryColor,
            primaryColorHover,
            accentColor,
            accentColorHover,
        } = colorTheme;
        return createMuiTheme({
            palette: {
                type: mode,
                primary: {
                    main: primaryColor,
                    dark: primaryColorHover,
                },
                secondary: {
                    main: accentColor,
                    dark: accentColorHover,
                },
            }
        });
    }, [colorTheme, mode]);
    return (
        <ThemeProvider theme={theme}>
            <CssBaseline />
            {children}
        </ThemeProvider>
    );
};

Однако мои размеры и формы шрифта меняются. Размеры многих моих пользовательских компонентов были уменьшены, а круги были изменены на эллипсы, хотя при проверке радиус границы все еще составлял 50%. Однако в документации указано, что CssBasline необходимо добавить, чтобы применить темный режим во всем приложении.

С CSS базовой линией (легкий режим):

Без CSS базовый уровень:

Что не так с тем, что я сделали?

PS: Вот как я использую MaterialTheme:

<Router history={history}>
  <PersistGate persistor={persistor}>
    <MaterialTheme>
      <Suspense fallback={<PageLoader />}>
        <Switch>
          // my routes
        </Switch>
      </Suspense>
    </MaterialTheme>
  </PersistGate>
</Router>;