Does createMuiTheme provide default values for missing properties?

user_7498164 0
Viewed 451

I am creating a theme using createMuiTheme():

import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';

const theme = responsiveFontSizes(
  createMuiTheme({
    palette: {
      type: 'dark',
      primary: {
        main: '#c5cae9',
        light: '#f8fdff',
        dark: '#9499b7',
        contrastText: '#212121',
      },
      secondary: {
        main: '#5c6bc0',
        light: '#8e99f3',
        dark: '#26418f',
        contrastText: '#ffffff',
      },
    },
    typography: {
      fontFamily: [
        'Roboto',
        'Arial',
        '"Helvetica"',
        'sans-serif',
      ].join(','),
    },
  }),
);

export default theme;

When looking at the default theme, I'm missing a lot of properties like breakpoints, direction, shadows, spacing, and etc.

Even when those properties are omitted, does createMuiTheme() provide default values that populate those fields? Or do I have to provide those values myself.

material-ui reactjs
1 Answers

Take a look at createMuiTheme options signature

(Object): Takes an incomplete theme object and adds the missing parts.

So yes, your custom theme will be merged with MUI's default theme. See the docs here

const options = {palette:{/*such empty*/}}

export const theme = createMuiTheme(options)
user_101065800
Related