CODEWITHSUNDEEP
reactjsmaterial-ui
Oli C
Oli C

Reputation: 1178

How to combine overrides in Material UI (React) - overwrite both theme styles and component styles

I have an issue when I try to customise both the overall theme styling and the component styling at once in Material UI.

I started with the below which works perfectly:

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
    palette: {
        brand: '#0D3B66',
        primary: {
            main: '#4AA1FF',
        },
    },
    typography: {
        // Changes to default 'typography'.
        fontFamily: '"Mukta", sans-serif',
        fontWeight: 400,
        h1: {
            fontSize: 24,
        },
    }
})

export default theme

Then I wanted to add the following override as well to change theme breakpoint. (This also works perfectly alone).

However, when I combine both like this:

import { createTheme } from '@mui/material/styles';

let theme = createTheme({});

theme = createTheme(theme, {
    components: {
        MuiContainer: {
            styleOverrides: {
                maxWidthLg: {
                    [theme.breakpoints.up('lg')]: {
                        maxWidth: 1280 // Your custom value here
                    },
                }
            }
        }
    }
})

export default theme

Hence, I tried to combine these to form this final block:

import { createTheme } from '@mui/material/styles';

let theme = createTheme({});

theme = createTheme(theme, {
    components: {
        MuiContainer: {
            styleOverrides: {
                maxWidthLg: {
                    [theme.breakpoints.up('lg')]: {
                        maxWidth: 1280 // Your custom value here
                    },
                }
            }
        }
    },
    palette: {
        brand: '#0D3B66',
        primary: {
            main: '#4AA1FF',
        },
    },
    typography: {
        // Changes to default 'typography'.
        fontFamily: '"Mukta", sans-serif',
        fontWeight: 400,
        h1: {
            fontSize: 24,
        },
    }
})

export default theme

...I no longer see the palette changes take effect when combined... Maybe palette and typography need to be handled separately or on a different level? I'm not sure how to do this, so any advice appreciated!

Upvotes: 1

Views: 595

Answers (1)

Amirhossein
Amirhossein

Reputation: 2037

This code works perfect for me:

import React from 'react';
import './App.css';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { Button, Container } from '@mui/material';

let theme = createTheme({});

theme = createTheme(theme, {
  components: {
    MuiContainer: {
      styleOverrides: {
        maxWidthLg: {
          [theme.breakpoints.up('lg')]: {
            maxWidth: 1280
          },
        }
      }
    }
  },
  palette: {
    brand: '#0D3B66',
    primary: {
      main: '#4caf50',
    },
  },
  typography: {
    fontFamily: '"Mukta", sans-serif',
    fontWeight: 400,
    h1: {
      fontSize: 24,
    },
  }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Container>
        <Button>Primary</Button>
      </Container>
    </ThemeProvider>
  );
}

export default App;

You can see the result: enter image description here

Upvotes: 2

Related Questions