Material ui override default styling?

Question

I have a react material UI project that uses the AccordionSummary component. I want to change the default colour of this component. I've tried to do this like so

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

export const theme = createTheme({
  overrides: {
    MuiAccordionSummary: {
        root: {
          backgroundColor: 'rgba(255, 0, 0, 0.4)'
        }
    }
  }
});

And then applying the theme to the root:

import { ThemeProvider } from '@material-ui/core/styles';
import { theme } from '@utils/theme';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <ThemeProvider theme={theme}>
      <Header />
      <Component {...pageProps} />
      </ThemeProvider>
    </>
  );
}

export default MyApp;

I'm also using nextjs. But I can't seem to change the colour. Any help appreciated!

Tushar Shahi · Accepted Answer · 2022-01-22 16:36:20Z

1

This is how I would do it:

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


let theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        root : {
          backgroundColor: 'rgba(255, 0, 0, 0.4)';
        };
      },
    }
}});

I think you are missing the styleOverrides key.

answered Jan 22, 2022 at 16:36

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TopSkill · Accepted Answer · 2022-01-22 16:01:20Z

0

import { withStyles } from '@material-ui/core/styles';
import { ExpandMore } from '@material-ui/icons';

import MuiAccordion from '@material-ui/core/Accordion';
import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
import MuiAccordionDetails from '@material-ui/core/AccordionDetails';

import { AccordionActions, Button, Divider } from '@material-ui/core';

const Accordion = withStyles({
  root: {
    border: '1px solid rgba(0, 0, 0, .125)',
    boxShadow: 'none',
    borderRadius: '30px 0px 30px 0',
    '&:not(:last-child)': {
      borderBottom: 0,
    },
    '&:before': {
      display: 'none',
    },
    '&$expanded': {
      margin: 'auto',
    },
  },
  expanded: {},
})(MuiAccordion);

const AccordionSummary = withStyles({
  root: {
    backgroundColor: '#21CFFF',
    borderBottom: '1px solid #12738E',
    marginBottom: -1,
    color: '#666666',
    borderRadius: '30px 0px 30px 0',
    minHeight: 56,
    '&$expanded': {
      minHeight: 56,
    },
  },
  content: {
    '&$expanded': {
      margin: '12px 0',
    },
  },
  expanded: {},
})(MuiAccordionSummary);


const AccordionDetails = withStyles((theme) => ({
  root: {
    padding: theme.spacing(2),
  },
}))(MuiAccordionDetails);

answered Jan 22, 2022 at 16:01

TopSkill

192 bronze badges

1 Comment

TopSkill Over a year ago

Hi @Nespony Please let me know if you have more questions

Ivan K. · Accepted Answer · 2023-03-02 19:44:53Z

file theme.js

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

const theme = createTheme({
  palette: {
    primary: {
      main: '#009BDF',
    },
    secondary: {
      main: '#14568D',
    },
    error: {
      main: '#FF0000',
    },
  },
  typography: {
    fontFamily: 'Helvetica, Arial, sans-serif',
  },
  components: {
    MuiAccordion: {
      styleOverrides: {
        root: {
          marginBottom: '5px',
          borderRadius: '0.6rem',
          boxShadow: 'none',
        },
      },
    },
    MuiAccordionSummary: {
      styleOverrides: {
        root: {
          background: '#14568D',
          borderRadius: '4px',
          content: {
            margin: '0px',
          },
        },
      },
    },
    MuiAccordionDetails: {
      styleOverrides: {
        root: {
          background: '#DEF1F9',
          borderBottomLeftRadius: '4px',
          borderBottomRightRadius: '4px',
        },
      },
    }, 
  },
});

dot forget to wrap your app.js or index.js file

index.js

import React from 'react';
import { render } from 'react-dom';
import { ThemeProvider } from '@mui/material/styles';
import App from './containers/App';
import theme from './style/theme';

render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

Collectives™ on Stack Overflow

Material ui override default styling?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related