Material UI 覆盖样式并增加特异性

Question

如何覆盖具有高特异性的类的规则？

例如，

AccordionSummary

中的.MuiAccordionSummary-content.Mui-expanded

类

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

结合：

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

已应用但被覆盖。

注意：

marginBottom: '0 !important'

可以工作，但感觉不是最佳解决方案。

Answer 1

您可以使用全局覆盖来更改 AccordionSummary 的默认边距。但是，这将影响应用程序中的所有 AccordionSummary 组件。

更好的方法（您已经在使用的方法）是包装组件并更改其类。如果您查看 AccordionSummary 的源代码，您会发现

expanded

属性是一个空块。边距由

content

属性中的引用选择器设置：

    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;

Answer 2

如果您将 mui v5+ 与 tss-react 一起使用，那么您可以使用

&

来增加 CSS 声明的特异性，如下所示：

import { makeStyles } from 'tss-react/mui';

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

使用的

&

越多，特异性就越高，覆盖其他样式的机会就越高。

了解更多：https://docs.tss-react.dev/increase-specificity