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

我将如何覆盖 display:flex

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

js 文件里面

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

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

Answer 1

首先，您需要通过 makeStyles 添加您想要的样式，如下所示：

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

然后覆盖 AccordionDetails 组件中的根类：

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

working example in sandbox

材质 UI 覆盖手风琴 CSS

1 个答案: