如何覆盖材质 UI MuiCard-root 类中的溢出属性答案

【问题标题】：How can i override the overflow property in material UI MuiCard-root class如何覆盖材质 UI MuiCard-root 类中的溢出属性
【发布时间】：2021-05-16 12:46:49
【问题描述】：

这是我的风格：

const styles = (theme) => ({
  panel: {
    position: 'absolute',
    zIndex: 10,
  },
  setLink: {
    display: 'inline',
    textDecoration: 'underline',
    cursor: 'pointer',
    whiteSpace: 'nowrap',
  },
  field: {
    width: '100%',
  },
  dropUp: {
    transform: `translateY(calc(-100% - ${theme.spacing(3)}px))`,
  },
});

但在类MuiCard-root 上将溢出设置为隐藏。如何将其覆盖为可见？

【问题讨论】：

标签： reactjs material-ui material-design materialize react-admin

【解决方案1】：

我不知道你想做什么，但正如docs所说：

当配置变量不够强大时，您可以利用主题的 overrides 键来潜在地更改 Material-UI 注入到 DOM 中的每一个样式。这是一个非常强大的功能。

这是一个例子：

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

const theme = createMuiTheme({
  overrides: {
    // Style sheet name ⚛️
    MuiCard: {
      // Name of the rule
      root: {
        // Some CSS
        overflow: 'visible',
      },
    },
  },
});

而且你必须用：

包裹你的组件

<ThemeProvider theme={theme}>
...
</ThemeProvider>

检查sn-p here

编辑

向您的组件添加自定义className

<Card className={classes.customCardName}>

在你的样式中添加这个

customCardName: {
    overflow: "visible"
  }

【讨论】：

该项目没有使用createMuiTheme和ThemeProvider，而是使用了WithStyles。
您可以创建一个代码框来查看您的示例吗？