时间戳

首页 > 解决方案 > Material UI 覆盖样式，增加了特异性

reactjs - Material UI 覆盖样式，增加了特异性

问题描述

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

例如，AccordionSummary.MuiAccordionSummary-content.Mui-expanded中的类

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

结合：

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

被应用但被覆盖。

注意：marginBottom: '0 !important'有效，但感觉不是最佳解决方案。

标签： reactjsmaterial-uicss-in-js

解决方案

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

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

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

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

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;

推荐阅读