CODEWITHSUNDEEP
reactjsmaterial-ui
Svish
Svish

Reputation: 157991

Is there a way to change Typography defaults in a component?

The default variant and color of the Typography component is body1 and initial. I've made a component, and when the Typography component is used as children of it, I'd like the default to instead be body2 and textSecondary. Is there a way to do this in 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>

I can of course do the following, but would really prefer a way where the child components could still use the regular Typography component. Or if there's a way to extend/create an alternative Typography component that doesn't result in two components like here (the wrapper and the wrapped typography component).

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>

Upvotes: 2

Views: 2777

Answers (3)

Sourav Singh
Sourav Singh

Reputation: 955

You can also override globally like this any variant of 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>

Upvotes: 1

Svish
Svish

Reputation: 157991

Solved using a combination of the suggested duplicate (Is it possible to override material-ui components default props?), and the "nested themes" feature (https://material-ui.com/customization/theming/#nesting-the-theme) I didn't know about.


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>
  );
}

Upvotes: 4

elvis_ferns
elvis_ferns

Reputation: 524

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

Upvotes: -3

Related Questions