Berry React
v4.0.0
v4.0.0
  • Introduction
  • Package
  • Getting Started
    • Pre-requisites
    • Quick Start
    • Mock backend
    • Deployment
    • Licensing
  • Setup
    • Seed
    • To Existing Project
  • Folder Structure
  • State Management
  • Multi Language
  • Authentication
    • Firebase
    • Auth0
    • AWS Cognito
    • Supabase
  • API Calls
  • Routing
    • New Menu
    • Login as First Page
    • Skip Login
    • Render Menu from the backend
    • Remove menu render via backend
  • Theme
    • Configuration
    • Presets
    • Style
      • Color
      • Typography
      • Overrides
      • Shadows
    • Layouts
    • Logo
  • How to
    • Remove eslint
    • Remove prettier
  • Components
    • Avatar
    • AnimateButton
    • Accordion
    • Breadcrumbs
    • Chip
    • ImageList
    • MainCard
    • Transitions
    • SubCard
  • Dependencies
  • Support
    • Roadmap
    • Changelog
    • FAQ
  • Berry Eco System
Powered by GitBook
On this page

Was this helpful?

  1. Theme
  2. Style

Overrides

We have overridden many MUI components and those style will be applied globally.

Customize MUI Component style

We have provided a central location to override any default style of any component. All the overrides' styles exist in src\themes\compStyleOverride.jsx

compStyleOverride.js
// material-ui
import { alpha } from '@mui/material/styles';

// project imports
import { ThemeMode } from 'config';

/**
 * MUI Componets whose styles are overrided as per theme
 */
export default function componentStyleOverrides(theme, borderRadius, outlinedFilled) {
    return {
        MuiButton: {
            styleOverrides: {
                root: {
                    fontWeight: 500,
                    textTransform: 'capitalize',
                    borderRadius: '4px'
                }
            }
        },
        ...
        ...
         MuiAlert: {
            styleOverrides: {
                root: {
                    alignItems: 'center'
                },
                outlined: {
                    border: '1px dashed'
                }
            }
        },
    };
}

You can add default property for any MUI component, and it will be applied everywhere. We emitted lines to view it better in the above code block, but you can see many controls' styles override in the same file. Feel free to change it as per your need.

Was this helpful?