Material ui override default styling?-CodePudding

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!

CodePudding user response：

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);

CodePudding user response：

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.