Material-ui: Can't Override Global Typography

[naji247]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I should be able to modify the typography through the overrides and see purple text with a different fontfamily for all text in my application

Current Behavior

No change in color occurs or fontFamily

Steps to Reproduce (for bugs)

https://codesandbox.io/s/8444zvr28j

1. Use createMuiTheme with object:

const theme = createMuiTheme({
  overrides: {
    MuiTypography: {
      root: {
        fontFamily: "Product Sans"
      },
      colorPrimary: purple
    }
  }
});

Context

I'm working on a side project using MuiTable, and all the fonts are defaulted to Roboto :(

I am using react-starter-kit and have imported fonts using webpack

Your Environment

| Tech | Version . |
|--------------|------------------|
| Material-UI | 1.0.0-beta.36 |
| React | 16.2.0 |
| browser | Chrome 64 . |

[oliviertassinari]

It's not supposed to work this way. Have a look at this documentation section for changing the default font: https://material-ui-next.com/customization/themes/#Typography. Regarding the color, you need to provide some CSS, you can't provide a color object directly.

[oliviertassinari]

I should be able to modify the typography through the overrides and see purple text with a different fontfamily for all text in my application

@naji247 You can do it like this in your example:

const theme = createMuiTheme({
  typography: {
    fontFamily: "Product Sans",
  },
  overrides: {
    MuiTypography: {
      body1: {
        color: purple[500],
      },
      subheading: {
        color: purple[500],
      },
    }
  }
});

https://codesandbox.io/s/l3r6zlmmlz

[naji247]

Your changes didn't change the fontFamily application wide though...?

On Wed, Mar 7, 2018 at 12:46 PM, Olivier Tassinari <[email protected]

wrote:

Closed #10552 https://github.com/mui-org/material-ui/issues/10552.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mui-org/material-ui/issues/10552#event-1509808200,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AB1N45qC2Lpln66JKpFIrz5CawOgAR18ks5tcEdDgaJpZM4Sf19z
.

[naji247]

It's still all Roboto

On Wed, Mar 7, 2018 at 12:58 PM, Naseem Al-Naji [e-mail] wrote:

Your changes didn't change the fontFamily application wide though...?

On Wed, Mar 7, 2018 at 12:46 PM, Olivier Tassinari <
[email protected]> wrote:

Closed #10552 https://github.com/mui-org/material-ui/issues/10552.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mui-org/material-ui/issues/10552#event-1509808200,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AB1N45qC2Lpln66JKpFIrz5CawOgAR18ks5tcEdDgaJpZM4Sf19z
.

[oliviertassinari]

Your changes didn't change the fontFamily application wide

@naji247 I have updated the code. Now, it does. It would have been simpler if you had a closer look at the documentation.

[mrmadhat]

I'm having a similar issue modifying the value of marginBottom, I can accomplish a change in spacing that is applied to all typography components (from the answer on this stackoverflow question) but I would like to vary the gutter depending on what variant is used.

My code looks like this currently:

const baseTheme = createMuiTheme({
    spacing: factor => `${0.5 * factor}rem`,
});

const theme = createMuiTheme({
    ...baseTheme,
        overrides: {
            MuiTypography: {
                gutterBottom: {
                    marginBottom: baseTheme.spacing(5),
                },
            },
        }
})

export default responsiveFontSizes(theme)

What I would like to do:

const baseTheme = createMuiTheme({
    spacing: factor => `${0.5 * factor}rem`,
});

const theme = createMuiTheme({
    ...baseTheme,
    overrides: {
        MuiTypography: {
            h1: {
                gutterBottom: {
                    marginBottom: baseTheme.spacing(5),
                },
            },
        },
    }
})

export default responsiveFontSizes(theme)

Is this possible?

[oliviertassinari]

@mrmadhat Yes, you can use a global CSS selector .MuiTypography-gutterBottom or a style function.

[mrmadhat]

@oliviertassinari thankyou for your help, what I have now is:

export const GlobalCss = withStyles({
    '@global': {
        '.MuiTypography-h1.MuiTypography-gutterBottom': {
            marginBottom: baseTheme.spacing(5)
        },
        '.MuiTypography-h2.MuiTypography-gutterBottom': {
            marginBottom: baseTheme.spacing(3)
        }
    }
})(() => null);

Which works as expected, is there a better way to accomplish this? Could you possibly provide an example?

[oliviertassinari]

@mrmadhat Both approaches should work:

const theme = createMuiTheme({
  overrides: {
    MuiTypography: {
      h1: {
        '&.MuiTypography-gutterBottom': {
          marginBottom: 7,
        },
      },
      h2: {
        marginBottom: props => (props.gutterBottom ? 20 : null),
      },
    },
  },
});

But notice that the "h2" approach is significantly slower, at least, until we solve a core issue with the styling solution.

[mrmadhat]

Great, thankyou!

[kasaiee]

I had a similar issue, fontFamily was working in the first level of nested components and finally, I fixed it by using !important

const theme = createMuiTheme({
  typography: {
    fontFamily: "'YekanBakh !important'",
  },
});

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <RTL>
      <SnackbarProvider>
        <App />
      </SnackbarProvider>
    </RTL>
  </ThemeProvider>
, document.getElementById('root'));

I tested all the solution you suggested but none of them worked.
__any idea?__

[kasaiee]

I had a similar issue, fontFamily was working in the first level of nested components and finally, I fixed it by using !important

const theme = createMuiTheme({
  typography: {
    fontFamily: "'YekanBakh !important'",
  },
});

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <RTL>
      <SnackbarProvider>
        <App />
      </SnackbarProvider>
    </RTL>
  </ThemeProvider>
, document.getElementById('root'));

I tested all the solution you suggested but none of them worked.
any idea?

I found what makes the problem. I used google-maps-react. I used the Typography component in InfoWindow to show some details on each marker. changing Typography to normal HTML h6 solved the issue.

__has issue__

<Typography variant="h6" className={classes.activePlaceCardTitle}>{activePlace.name}</Typography>

__correct__

<h6 className={classes.activePlaceCardTitle}>{activePlace.name}</h6>

__Reason__ : Typography overrides default style on my customized style