CODEWITHSUNDEEP
reactjsmaterial-uinext.js
Nespony
Nespony

Reputation: 1371

Material ui override default styling?

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!

Upvotes: 0

Views: 2586

Answers (3)

Ivan K.
Ivan K.

Reputation: 1124

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

Upvotes: 0

Tushar Shahi
Tushar Shahi

Reputation: 20701

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.

Upvotes: 1

TopSkill
TopSkill

Reputation: 19

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

Upvotes: 0

Related Questions