具有特殊性的实质性UI覆盖样式 [英] Material UI Overriding styles with increased specificity

问题描述

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

How can I override a rule of a class which has high specificity.

例如..MuiAccordionSummary-content.Mui扩展类> AccordionSummary

Eg. the .MuiAccordionSummary-content.Mui-expanded class of the AccordionSummary

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

结合:

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

已应用但被覆盖.

marginBottom:'0！important'，有效，但看起来并不是最佳解决方案.

marginBottom: '0 !important', works, but doesnt look like an optimal solution.

推荐答案

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

You could use global overrides to change the default margin of the AccordionSummary. However, this will affect all AccordionSummary components in your application.

更好的方法(您已经在使用的一种方法)是包装组件并更改其类.如果查看AccordionSummary的来源，您会发现 expanded 属性是一个空块.边距由 content 属性中的引用选择器设置:

The better approach (the one you are already using) is to wrap the component and alter its classes. If you look into the source of the AccordionSummary, you will find that the expanded property is an empty block. The margin gets set by the referencing selector in the content property:

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

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

If you add the same reference in your custom styles, the priority becomes higher and you won't need !important. You will have to add the expanded className to your custom styles though:

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;

这篇关于具有特殊性的实质性UI覆盖样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！