CODEWITHSUNDEEP
reactjsmaterial-ui
connect2Coder
connect2Coder

Reputation: 1130

Material-UI v1: How to set one font size for all the components in material-ui v1?

We are using 1.4.5 material-ui in our application. Now we are trying to set one font size for all of the components in our application. For example we want to set fontSize: 14px, for headers / buttons / paragraph /list... and so on. Here is our sample theme configuration: 

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

const theme = createMuiTheme({
  typography: {
    fontSize: 14,
  },
  palette: {
    primary: purple,
    secondary: green,
  },
  status: {
    danger: 'orange',
  },
});

If you notice we have tried to define the font size in a typography object but with this configuration, material-ui computes a font size according to the formula given at this link.

We are trying to achieve a 14px font-size application wide but we can not find an option to do this. One option can be a pxToRem function but I am not sure how should I overwrite that function and what should be my function? The other option is to define styles in every component and I think that is a bit overkill since we should able to do it with theme object. Please help me if you can think of a way to set the font size globally. Your help will be greatly appreciated.

Upvotes: 5

Views: 8525

Answers (1)

connect2Coder
connect2Coder

Reputation: 1130

NOTE: I am not sure why somebody will downvote my answer since my answer is based in material-ui docs. Here is the link. Please expand typography section and you will see this is how all the fonts are set. Please comment here the reason for the downvote. Also, note when I wrote this answer I was using Material UI 1.4.5

I will post the solution that solved my problem. Hopefully, this will help someone else as well: I end up defining the font size in a typography property of my theme. Here is how I set it up in the theme; 

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

const theme = createMuiTheme({
  typography: {
    fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
    fontSize: 13,
    display4: {
      fontSize: 13,
    },
    display3: {
      fontSize: 13,
    },
    display2: {
      fontSize: 13,
    },
    display1: {
      fontSize: 13,
    },
    headline: {
      fontSize: 13,
    },
    title: {
      fontSize: 13,
    },
    subheading: {
      fontSize: 13,
    },
    body2: {
      fontSize: 13,
    },
    body1: {
      fontSize: 13,
    },
    caption: {
      fontSize: 13,
    },
    button: {
      fontSize: 13,
    },
  },
  palette: {
    primary: purple,
    secondary: green,
  },
  status: {
    danger: 'orange',
  },
});

I have noticed if you used Div instead of PAPER element sometimes formatting does not apply (bug with material-ui??). So I end up creating a global class which I applied to any elements which were overriding my theme styles. 

  overRidefonts: {
    fontSize: 13,
    fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
  },

Upvotes: 4

Related Questions