Creating a defaultProps with createTheme in MUI v5 not working

Viewed 1110

I'm using Material-UI v5 for the first time, and I want to create a custom theme with createTheme to style a button component. According to the documentation:

The theme's components key allows you to customize a component without wrapping it in another component. You can change the styles, the default props, and more.

They provide a code example:

const theme = createTheme({
  components: {
    // Name of the component
    MuiButtonBase: {
      defaultProps: {
        // The props to change the default for.
        disableRipple: true, // No more ripple!
      },
    },
  },
});

But when I try to implement it there doesn't seem to be a components key with the createTheme. I get the following error:

Argument of type '{ components: any; }' is not assignable to parameter of type 'ThemeOptions'.
  Object literal may only specify known properties, and 'components' does not exist in type 'ThemeOptions'

What might be the problem here?

1 Answers

You're using MUI v5, but you import createTheme from v4, which doesn't have the components property in createTheme, so change the import path to:

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

From:

import { createTheme } from "@material-ui/core";
Related