How to use Material UI theme to make all button text bold

Question

I'm trying to set fontWeight: 'bold' for all of my button elements. I've made various attempts in my createTheme function:

export const muiTheme = createTheme({
  typography: {
    fontFamily: "poppins",
    button: {
      fontWeight: "bold",
      color: "blue",
    },
  },
  components: {
    MuiButton: {
      styleOverrides: {
        text: {
          fontWeight: "bold",
          color: "black",
        },
        textPrimary: {
          fontWeight: "bold",
          color: "black",
        },
      },
    },
    MuiButtonBase: {
      styleOverrides: {
        root: {
          fontWeight: "bold",
          color: "black",
        },
      },
    },
  },
});

None of the above is having any effect on my code with the exception of the fontFamily

user_5376404 · Answer

You can specify the font weight for your button in your theme in the typography object similar with the below.

import { createTheme } from '@mui/material/styles';

export const theme = createTheme({

  typography: {

    button: { // Here is where you can customise the button
      fontSize: 16,
      fontWeight: 700,
    },    
  },  
});

Then when using the Button MUI component should have the bold text

How to use Material UI theme to make all button text bold

1 Answers