Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I apply a Font Theme in React Material-UI?

I'm trying to apply a google font to my Material-UI react project, but can't seem to get it to take. I'm using mui 0.14.2.

My index.html font load: <link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>

My component where I apply the theme:

import ThemeManager from 'material-ui/lib/styles/theme-manager';
import LightRawTheme from 'material-ui/lib/styles/raw-themes/light-raw-theme';

const App = React.createClass({

    childContextTypes: {
        muiTheme: React.PropTypes.object,
    },
    getChildContext: function() {
        return {
            muiTheme: ThemeManager.modifyRawThemeFontFamily(ThemeManager.getMuiTheme(LightRawTheme), 'PT Sans, sans-serif')
        }
    },

...etc etc

}
like image 760
Brandon Avatar asked Apr 03 '16 04:04

Brandon


People also ask

How do I add a font to material UI theme?

To self-host fonts, download the font files in ttf , woff , and/or woff2 formats and import them into your code. ⚠️ This requires that you have a plugin or loader in your build process that can handle loading ttf , woff , and woff2 files. Fonts will not be embedded within your bundle.

How do you style Typography in material UI?

You can import <Typography /> component from @mui/material using the following code. import Typography from '@mui/material/Typography'; // or import { Typography } from '@mui/material'; Important Props and its values: align: It is used to align the text on the component.


1 Answers

The other answers don't seem to work for Material-UI v1. Here's what worked for me:

import { createMuiTheme } from 'material-ui/styles';
import createPalette from 'material-ui/styles/palette';
import createTypography from 'material-ui/styles/typography';

const theme = createMuiTheme({
  typography: createTypography(createPalette(), {
    fontFamily: '"Comic Sans"',
  })
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>

Here's another example for overriding the font while using the dark theme:

const theme = (() => {
  const palette = createPalette({
    type: 'dark',
  });

  const typography = createTypography(palette, {
    fontFamily: '"Comic Sans"',
  });

  return createMuiTheme({
    palette: palette,
    typography: typography,
  });
})();

The typography documentation for v1 is here although I had trouble getting the example working: https://material-ui-1dab0.firebaseapp.com/customization/themes#typography

like image 85
bmaupin Avatar answered Sep 30 '22 01:09

bmaupin