Global overrides MUI components

Overrides the components of the MUI in the directory src/theme/core/components.

styleOverrides

https://mui.com/material-ui/customization/theme-components/#theme-style-overrides

defaultProps

https://mui.com/material-ui/customization/theme-components/#theme-default-props

Example:

// src/theme/core/components/appbar.tsx
 
const MuiAppBar: Components<Theme>['MuiAppBar'] = {
  defaultProps: { color: 'transparent' },
  styleOverrides: { root: { boxShadow: 'none' } },
};

Reference:

https://mui.com/components/
https://mui.com/material-ui/customization/theme-components/
https://mui.com/customization/theme-components/#global-style-overrides

src
  ├── theme/core/components
    ├── accordion.jsx
    ├── alert.jsx
    ├── appbar.jsx
    ├── ...
...

Before Overrides (MUI theme)

After Overrides (Minimal theme)

The change will apply globally for MUI component.

This helps you to deeply customize your style, to suit your design.