Material UI Override Accordion CSS

Question

import React from 'react'
import Checkbox from '@material-ui/core/Checkbox';
import { Grid, Typography, Paper, Box, }  from '@material-ui/core';
import useStyles from '../../../styles/PageStyle/settingStyle';
import Button from '@material-ui/core/Button';
import { ExpandMore } from '@material-ui/icons';
import { Accordion, AccordionSummary, AccordionDetails, AccordionActions } from '@material-ui/core';


export default function NotificationSetting (){
  const classes = useStyles();
    
  return (

    <Grid container xs={12} >
       <Accordion className={classes.accordion}>

          <AccordionSummary  expandIcon={<ExpandMore />}>
            <Typography noWrap className={classes.typography} >
              Notification Preferences
            </Typography>
          </AccordionSummary>
          
          <AccordionDetails >
            <Grid container xs={12}>
              <Grid item xs={3}>
                  
              </Grid>
              <Grid item xs={3} >
                <AccordionActions>
                  <Checkbox className={classes.customCheckMark}/>
                  <Checkbox className={classes.customCheckMark}/>
                  <Checkbox className={classes.customCheckMark}/>
                </AccordionActions>
              </Grid>
              <Grid item xs={3}>
                  
              </Grid>
              <Grid item xs={3} >
                <AccordionActions>
                  <Checkbox className={classes.customCheckMark}/>
                  <Checkbox className={classes.customCheckMark}/>
                  <Checkbox className={classes.customCheckMark}/>
                </AccordionActions>
              </Grid>
            </Grid>
            <Grid item xs={12} >
              <Button variant="outlined" >EDIT </Button>
            </Grid>
          </AccordionDetails>
          
        </Accordion>
    </Grid>
        
  );
}

How would I override display:flex from

.MuiAccordionDetails-root {
    display: flex;
    padding: 8px 16px 16px;
}

inside the js file

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles((theme) => ({}))

Answer 1

First, you need to add your desirable style by makeStyles as below:

const useStyles = makeStyles((theme) => ({
  detailRoot: {
    display: "table-row"
  }
}));

And then override the root class in AccordionDetails component:

<AccordionDetails classes={{ root: classes.detailRoot }}>

working example in sandbox