Buy nowGet update
  • getting started
    • Introduction
    • Quick start
    • Mock server
    • Deployment
    • Package & license
    • Setup
    • Figma
  • theme UI
    • Colors
    • Typography
    • IconsNEW
    • Shadows
    • Css vars
    • Logo
    • Layout
    • Navigation
    • Settings
  • Global
    • Styles
    • Config
    • Components overrides
  • development
    • Routing
    • Subfolder
    • Authentication
    • Environment variables
    • Api calls
    • Multi language
    • Structure
    • Clean project
    • Dependencies
    • Tailwind
    • Migrate to CRA
    • Credit assets
  • support
    • 🔵 Update
    • 🔴 Faqs & support
    • 🟣 Changelogv7.4.0
© All rights reserved.ContactHome

Global overrides MUI components

Customize and override MUI components globally by modifying files in the directory: src/theme/core/components


🎨 styleOverrides
  • Customize the styles of MUI components globally using styleOverrides.
  • 📘 Official docs – Style overrides

⚙️ defaultProps
  • Set default props for MUI components globally using defaultProps.
  • 📘 Official docs – Default props
src
  ├── theme/core/components
    ├── accordion.jsx
    ├── alert.jsx
    ├── appbar.jsx
    ├── ...
...

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

Before Overrides (MUI default theme)

Before overrides

After Overrides (Minimal theme)

After overrides

🔗 Reference:
  • MUI components
  • Theme customization
  • Global style overrides

The change will apply globally for MUI component.

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