材质UI中带有不正确样式的组件的类名在React框架内

编程问答 2022-08-16

问题描述

我正在使用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添加为后缀-随机数）。
因此，未应用我的自定义样式。

enter image description here

这是上述内容的沙箱： https://codesandbox.io/s/sparkling-field-ui82v

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

iframematerial-uireactjsreactjsstyled-components