Material UI 中的类名不正确，反应框架内的样式组件

Question

我正在使用react-frame-component 加载我创建的自定义组件，该组件使用material ui 和styled-components。

我创建的自定义组件无关紧要，但包含以下相关代码：

const StyledCardHeader = styled(({ isRTL, ...rest }) => (
  <CardHeader {...rest} />
))`
  ${({ theme, isRTL }) => `
    & .MuiCardHeader-title {
      margin-right:${isRTL ? 0 : theme.spacing(2)}px;
      margin-left:  ${isRTL ? theme.spacing(2) : 0}px;
    }
`};
`;

当它渲染时，实际的类名变得比我预期的不同：MuiCardHeader-title-34（它添加了 34 作为后缀 - 随机数）。
因此，我的自定义样式没有被应用。

这是上面的沙盒： https://codesandbox.io/s/sparkling-field-ui82v

Answer 1

您可以查看 overriding 基于文档的 MUI CardHeader CSS。

<CardHeader
  {...rest}
  classes={{
    title: makeStyles({
      customTitleMargin: {
        marginRight: `${isRTL ? 0 : theme.spacing(2)}px`,
        marginLeft: `${isRTL ? theme.spacing(2) : 0}px`,
      }
    })().customTitleMargin
  }}
/>

我不想过多地弄乱你的代码，所以在我的示例中，我只是插入了从@material-ui/styles 导出的makeStyles，但未来实现的逻辑是相似的，你应该只覆盖 MUI 组件自己。

代码沙盒：https://codesandbox.io/s/lucid-joliot-5mf8n?file=/src/Card.js