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?

CodePudding user response：

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";