react框架内具有样式组件的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

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

<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组件本身。

CodeSandBox：https://codesandbox.io/s/lucid-joliot-5mf8n?file=/src/Card.js