title: Material UI Override Accordion CSS
body: <pre><code>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 (
  
      &lt;Grid container xs={12} &gt;
         &lt;Accordion className={classes.accordion}&gt;
  
            &lt;AccordionSummary  expandIcon={&lt;ExpandMore /&gt;}&gt;
              &lt;Typography noWrap className={classes.typography} &gt;
                Notification Preferences
              &lt;/Typography&gt;
            &lt;/AccordionSummary&gt;
            
            &lt;AccordionDetails &gt;
              &lt;Grid container xs={12}&gt;
                &lt;Grid item xs={3}&gt;
                    
                &lt;/Grid&gt;
                &lt;Grid item xs={3} &gt;
                  &lt;AccordionActions&gt;
                    &lt;Checkbox className={classes.customCheckMark}/&gt;
                    &lt;Checkbox className={classes.customCheckMark}/&gt;
                    &lt;Checkbox className={classes.customCheckMark}/&gt;
                  &lt;/AccordionActions&gt;
                &lt;/Grid&gt;
                &lt;Grid item xs={3}&gt;
                    
                &lt;/Grid&gt;
                &lt;Grid item xs={3} &gt;
                  &lt;AccordionActions&gt;
                    &lt;Checkbox className={classes.customCheckMark}/&gt;
                    &lt;Checkbox className={classes.customCheckMark}/&gt;
                    &lt;Checkbox className={classes.customCheckMark}/&gt;
                  &lt;/AccordionActions&gt;
                &lt;/Grid&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={12} &gt;
                &lt;Button variant=&quot;outlined&quot; &gt;EDIT &lt;/Button&gt;
              &lt;/Grid&gt;
            &lt;/AccordionDetails&gt;
            
          &lt;/Accordion&gt;
      &lt;/Grid&gt;
          
    );
  }
  </code></pre>
  <p>How would I override display:flex from</p>
  <pre><code>.MuiAccordionDetails-root {
      display: flex;
      padding: 8px 16px 16px;
  }
  </code></pre>
  <p>inside the js file</p>
  <pre><code>import { makeStyles } from '@material-ui/core/styles';
  
  export default makeStyles((theme) =&gt; ({}))
  </code></pre>