材质ui覆盖默认样式？答案

【问题标题】：Material ui override default styling?材质ui覆盖默认样式？
【发布时间】：2022-01-23 00:36:20
【问题描述】：

我有一个使用 AccordionSummary 组件的 React Material UI 项目。我想更改此组件的默认颜色。我试过这样做

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

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

然后将主题应用到根：

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;

我也在使用 nextjs。但我似乎无法改变颜色。任何帮助表示赞赏！

【问题讨论】：

标签： reactjs material-ui next.js

【解决方案1】：

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

【讨论】：

嗨@Nespony 如果您有更多问题，请告诉我

【解决方案2】：

我会这样做：

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


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

我认为您缺少styleOverrides 键。

【讨论】：