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

Posted 2023-02-22

【中文标题】如何覆盖材质 UI MuiCard-root 类中的溢出属性

【英文标题】：How can i override the overflow property in material UI MuiCard-root class

【发布时间】：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 上将溢出设置为隐藏。如何将其覆盖为可见？

【参考方案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。

您可以创建一个代码框来查看您的示例吗？