reactjs - 标题中 Material UI 中的重复按钮基线

问题描述

@material-ui/core - 4.3.1
反应 - 16.8.6/16.9.0
网络包 - 4.38.0/4.39.1

在我们的项目中，当我们在一个组件中有一个材质 ui 按钮时，然后在同一页面上的一个单独组件中，我们使用扩展面板或另一种类型的按钮，我们将第二个 MuiButtonBase 实例导入到标题中。这导致我们的自定义样式被覆盖并且样式被一起转储。

我们已按照https://material-ui.com/getting-started/faq/#i-have-several-instances-of-styles-on-the-page中的步骤进行操作

我们还尝试了https://github.com/mui-org/material-ui/issues/15610上的步骤

这些都没有为我们解决这个问题。:(

 splitChunks: {
      chunks: 'async',
      minChunks: 2,
      name: 'vendor',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
      }
    },
  },

import {
  Modal, Button,
} from '@material-ui/core';

() => (
  <Modal open={open}>
          <Button className={classes.cancel} onClick={onCancel}>{cancelText}</Button>
          <Button className={classes.delete} onClick={onConfirm}>{confirmText}</Button>
  </Modal>
);

import {
  ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails,
} from '@material-ui/core';

() => (
<ExpansionPanel expanded={expanded}>
        <ExpansionPanelSummary onClick={toggle} className={classes.summary} expandIcon={<ExpandMore />}>
          <span>
            {name}
          </span>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
          {children}
        </ExpansionPanelDetails>
      </ExpansionPanel>
);

如果我们没有两个 MuiButtonBase 导致我们的样式被覆盖，那就太好了。

标签： reactjswebpackmaterial-ui

我有同样的问题。我进行了很多搜索，为我解决的问题是我将所有导入从更改@material-ui/core为@mui/material.

旁注：也没有列出，只是想说缓存 rtl 和 ltr 需要存在于最顶层的组件上，并且 mui 通过 html dir 属性识别。

reactjs - 标题中 Material UI 中的重复按钮基线

问题描述

解决方案

推荐阅读