Есть ли способ изменить типографские настройки по умолчанию в компоненте?

Question

Вариант и цвет по умолчанию для Типографский компонент равен body1 и initial. Я сделал компонент, и когда компонент Typography используется в качестве его дочерних элементов, я бы хотел, чтобы по умолчанию вместо него были body2 и textSecondary. Есть ли способ сделать это в Material UI?

<Sidebar>
  <Typography>
    This should have body2 and textSecondary 
    when nothing else is specified.
  </Typography>
</Sidebar>

<Typography>
  This should have the regular defaults.
</Typography>

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

import React from 'react';
import Typography, { TypographyProps } from 'components/Typography';

export default function SidebarTypography({
  variant = 'body2',
  color = 'textSecondary',
  ...props
}: TypographyProps): React.ReactElement {
  return <Typography variant={variant} color={color} {...props} />;
}

<Sidebar>
  <SidebarTypography>
    This has body2 and textSecondary.
  </SidebarTypography>
</Sidebar>

<Typography>
  This has the regular defaults.
</Typography>

Answer 1

Решено с использованием комбинации предложенного дубликата ( Можно ли переопределить параметры по умолчанию для компонентов Material-UI? ) и функцию "вложенных тем" (https://material-ui.com/customization/theming/#nesting -the-theme ) Я не знал о.

const sidebarTheme = (theme) =>
  createMuiTheme({
    ...theme,
    props: {
      ...theme.props,
      MuiTypography: {
        color: 'textSecondary',
        variant: 'body2',
      },
    },
  });

export default function SideBar(props) {
  return (
    <ThemeProvider theme={sideBarTheme}>{props.children}</ThemeProvider>
  );
}

Answer 2

Вы также можете переопределить глобально, как этот, любой вариант MuiTypography.

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

const theme = createMuiTheme({
  overrides: {
    MuiTypography: {
      body1: {
        fontSize: '18px !important',
        color: 'red',
      },
    },
  },
});

 <MuiThemeProvider theme={theme}> 
        // Your pages...
 </MuiThemeProvider>

Answer 3

<Typography variant="h1" component="h2">
  h1. Heading
</Typography>