What is up with MuiLoadingButton throwing this error in theme?-CodePudding

So in my createTheme object I have a particular batch of code on the MuiLoadingButton. That will be posted below.

```MuiLoadingButton: {
      defaultProps: {
        loadingPosition: 'end',
        loading: true,
        variant: 'contained'
      },
    },```

which throws an error as stated below:

```Type '{ MuiTypography: { styleOverrides: { root: { color: "#fff8e1"; }; h1: { color: "#fff8e1"; }; h2: { color: "#fff8e1"; }; }; }; MuiButtonGroup: { styleOverrides: { root: { '& .MuiButtonGroup-grouped:not(:last-of-type)': { ...; }; }; }; }; ... 5 more ...; MuiTextField: { ...; }; }' is not assignable to type 'Components<Omit<Theme, "components">>'.
  Object literal may only specify known properties, and 'MuiLoadingButton' does not exist in type 'Components<Omit<Theme, "components">>'.ts(2322)```

This is obviously a typescript related error, but I am wondering on ways of fixing this seeing that I don't have the same error with other Mui components I am overriding defaultProps on?

CodePudding user response：

This is caused by the LoadingButton component being in the @mui/lab package and not the core @mui/material package.

The solution for me was to add the following module augmentation to your code:

// When using TypeScript 4.x and above
import type {} from '@mui/lab/themeAugmentation';

// When using TypeScript 3.x and below
import '@mui/lab/themeAugmentation';

See the MUI docs for more info