MUI Component Overrides
This guide explains how to customize MUI components in KimiStores by overriding their default styles and behavior.
Introduction to MUI Overrides
Material UI allows you to customize components globally by using the theme's components property. In KimiStores, component overrides are organized in separate files for better maintainability.
Override File Structure
MUI component overrides are located in:
src/theme/overrides/Each component has its own override file, for example:
• Button.ts - Button component overrides
• Card.ts - Card component overrides
• Typography.ts - Typography component overrides
• index.ts - Exports all component overrides
File Structure Example
src/theme/
├── overrides/
│ ├── Accordion.ts
│ ├── Alert.ts
│ ├── Autocomplete.ts
│ ├── Avatar.ts
│ ├── Badge.ts
│ ├── Breadcrumbs.ts
│ ├── Button.ts
│ ├── ButtonGroup.ts
│ ├── Card.ts
│ ├── Checkbox.ts
│ ├── Chip.ts
│ ├── Container.ts
│ ├── CssBaseline.ts
│ ├── DataGrid.ts
│ ├── Dialog.ts
│ ├── Drawer.ts
│ ├── Fab.ts
│ ├── Link.ts
│ ├── Lists.ts
│ ├── LoadingButton.ts
│ ├── Menu.ts
│ ├── Paper.ts
│ ├── Popover.ts
│ ├── Progress.ts
│ ├── Radio.ts
│ ├── Rating.ts
│ ├── Select.ts
│ ├── Skeleton.ts
│ ├── Slider.ts
│ ├── Stepper.ts
│ ├── SvgIcon.ts
│ ├── Switch.ts
│ ├── Table.ts
│ ├── Tabs.ts
│ ├── TextField.ts
│ ├── Timeline.ts
│ ├── ToggleButton.ts
│ ├── Tooltip.ts
│ ├── Typography.ts
│ └── index.ts
├── core/
│ └── ...
└── index.ts
Override Structure
Each override file exports a function that receives the theme and returns an object with component overrides.
Typical Override Structure
Overrides can customize three aspects of a component:
1. styleOverrides
Customizes the styles of the component and its parts
2. defaultProps
Sets default prop values for the component
3. variants
Creates new variants of the component
Example: Button Override
// src/theme/overrides/Button.ts
import { Theme } from '@mui/material/styles';
// ----------------------------------------------------------------------
export default function Button(theme: Theme) {
return {
MuiButton: {
// Style overrides for different parts of the component
styleOverrides: {
// Styles for the root element
root: {
borderRadius: 8,
boxShadow: 'none',
fontWeight: 600,
textTransform: 'capitalize',
padding: '8px 16px',
'&:hover': {
boxShadow: 'none',
},
},
// Styles for the contained variant
contained: {
'&:hover': {
boxShadow: theme.customShadows.z8,
},
},
// Styles for the outlined variant
outlined: {
borderColor: theme.palette.grey[500_32],
},
// Styles for the size small
sizeSmall: {
padding: '4px 12px',
},
},
// Default props for the Button component
defaultProps: {
disableElevation: true,
color: 'primary',
},
},
};
}
Creating Custom Overrides
Step 1: Create the Override File
// src/theme/overrides/Card.ts
import { Theme } from '@mui/material/styles';
// ----------------------------------------------------------------------
export default function Card(theme: Theme) {
return {
MuiCard: {
styleOverrides: {
root: {
borderRadius: 16,
position: 'relative',
boxShadow: theme.customShadows.card,
},
},
},
MuiCardHeader: {
styleOverrides: {
root: {
padding: '24px 24px 0',
},
},
},
MuiCardContent: {
styleOverrides: {
root: {
padding: 24,
},
},
},
};
}
Step 2: Include in Main Overrides File
Add your new override to src/theme/overrides/index.ts:
// src/theme/overrides/index.ts
import { Theme } from '@mui/material/styles';
import Card from './Card';
import Link from './Link';
import Paper from './Paper';
import Button from './Button';
import Tooltip from './Tooltip';
// ... other imports
// ----------------------------------------------------------------------
export default function ComponentsOverrides(theme: Theme) {
return Object.assign(
Card(theme),
Link(theme),
Paper(theme),
Button(theme),
Tooltip(theme),
// ... other overrides
);
}
Example of Overridden Components
Default Button
KimiStores Button
Custom Override
Best Practices
1. Component-Specific Files: Keep overrides for each component in separate files for better organization.
2. Use Theme Values: Reference colors, spacing, and other theme values instead of hardcoding values.
3. Custom Shadows: Use theme.customShadows for consistent elevation across the app.
4. TypeScript: Use proper typing with the Theme interface for better type safety.
Advanced: Adding New Variants
You can also create new variants for components by defining them in the theme.
This example shows how to add a new 'soft' variant to the Button component using the variants property.
// src/theme/overrides/Button.ts
import { Theme } from '@mui/material/styles';
export default function Button(theme: Theme) {
return {
MuiButton: {
// ... existing styleOverrides and defaultProps
// Adding a new 'soft' variant
variants: [
{
props: { variant: 'soft', color: 'primary' },
style: {
color: theme.palette.primary.main,
backgroundColor: theme.palette.primary.lighter,
'&:hover': {
backgroundColor: theme.palette.primary.light,
},
},
},
{
props: { variant: 'soft', color: 'secondary' },
style: {
color: theme.palette.secondary.main,
backgroundColor: theme.palette.secondary.lighter,
'&:hover': {
backgroundColor: theme.palette.secondary.light,
},
},
},
// Add other colors as needed
],
},
};
}