How to change default typography for Textfields and such via theme in MUI v5?-CodePudding

Is there a way to map default typography for TextField and all my inputs via theme? I know I can do this

components: {
    MuiInput: {
        styleOverrides: {
            root: {
                fontSize: '16px',
                lineHeight: '25px'
            }
        }
    },

but I wish to find a way to map it to 'body2'

MuiInput: {
    defaultProps: {
        typographyProps???: {
            variant: 'body2'
        }
    }

CodePudding user response：

For using body2 font size value in another component, You need to access the theme object's typography property.
Then You will set the MUI TextFiled's font-size equal to that value from the theme object.

import { createTheme } from "@mui/material";

const theme = createTheme({});
theme!.components!.MuiTextField = {
  styleOverrides: {
    root: {
      "& .MuiInputBase-input": {
        fontSize: theme.typography.body2.fontSize, // this is the default mui body2 font-size
        lineHeight: "25px", // and any other styles you want...
      },
    },
  },
};

And You can change the body2 fontSize when defining the theme object:

const theme = createTheme({
  typography: {
    body2: {
      fontSize: 80,
    },
});
theme!.components!.MuiTextField = {
  styleOverrides: {
    root: {
      "& .MuiInputBase-input": {
        fontSize: theme.typography.body2.fontSize, // this will be 80px
        lineHeight: "25px", // and any other styles you want...
      },
    },
  },
};

EDIT: If You are not ok with overriding the theme after defining it, You can use this approach:

import { createTheme } from "@mui/material";
const myBody2FontSize = 20px;
const theme = createTheme({
  typography: {
    body2: {
      fontSize: myBody2FontSize,
    },
  }, 
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          "& .MuiInputBase-input": {
            fontSize: myBody2FontSize , // this is the default mui body2 font-size
            lineHeight: "25px", // and any other styles you want...
          },
        },
      },
    },
  },
});

CodePudding user response：

You could try setting it via classname. Its a bit awkward because an input doesnt actually use Typography internally.

MuiInput: {
    defaultProps: {
        className: 'MuiTypography-body2'
    }
}

Or possibly

MuiTextField: {
    defaultProps: {
        InputProps: {className: 'MuiTypography-body2' }
    }
}