reactjs - 具有更高特异性的 Material UI 覆盖样式

Question

如何覆盖具有高特异性的类的规则？
例如，.MuiAccordionSummary-content.Mui-expanded AccordionSummary 中的类

const useStyles = makeStyles(() => ({
    expanded: {
        marginBottom: 0,
    },
}));

结合:

<AccordionSummary classes={{
    expanded: classes.expanded,
}}/>

被应用但被覆盖。
备注 : marginBottom: '0 !important'有效，但感觉不是最佳解决方案。

Answer 1

您可以使用全局覆盖来更改 AccordionSummary 的默认边距。但是，这将影响应用程序中的所有 AccordionSummary 组件。
更好的方法(您已经在使用的方法)是包装组件并更改其类。如果您查看 AccordionSummary 的来源，您会发现 expanded属性是一个空块。边距由 content 中的引用选择器设置属性(property):

    content: {
      display: 'flex',
      flexGrow: 1,
      transition: theme.transitions.create(['margin'], transition),
      margin: '12px 0',
      '&$expanded': {
        margin: '20px 0',
      },
    },

如果您在自定义样式中添加相同的引用，则优先级会更高，您将不需要 !important .您必须添加 expanded className 到您的自定义样式:

import React from 'react';
import makeStyles from '@material-ui/core/styles/makeStyles'
import Accordion from '@material-ui/core/Accordion';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import AccordionSummary from '@material-ui/core/AccordionSummary';

const useStyles = makeStyles(() => ({
  expanded: {},
  content: {
    '&$expanded': {
      marginBottom: 0,
    },
  },
}));

const MyAccordion = ({ summary, details }) => {
  const classes = useStyles();

  return (
    <Accordion>
      <AccordionSummary classes={{ content: classes.content, expanded: classes.expanded }}>
        {summary}
      </AccordionSummary>
      <AccordionDetails>
        {details}
      </AccordionDetails>
    </Accordion>
  )
};

export default MyAccordion;