MUI 样式组件，访问内部 css 类

Question

我正在尝试通过将样式传递给 Alert 组件的 icon CSS 规则来访问 MUI Alert 的内部 CSS。

import React from 'react';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
import Alert from '@material-ui/lab/Alert';
import { styled } from "@material-ui/core/styles";
import { spacing } from "@material-ui/system";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    icon: {
      marginTop: theme.spacing(2),
    },
  }),
);

const MyAlert = styled(Alert)(spacing);

export default function SimpleAlerts() {
  const styles = useStyles();

  return (
    <div>
      <MyAlert classes={{icon: styles.icon}}>This is an error alert — check it out!</MyAlert>
    </div>
  );
}

但即使样式工作正常，控制台仍会抱怨

Material-UI: The key `icon` provided to the classes prop is not implemented in WithStyles(ForwardRef(Alert)).

如何避免这个（控制台）错误？

Code Sandbox

Answer 1

看来你需要做的就是替换

classes={{icon: styles.icon}} 和 className={styles.icon}

这有帮助吗？