MUI styled component, accessing inner css classes

Viewed 360

I'm trying to access the inner CSS of a MUI Alert by passing styles to the icon CSS rule of the Alert component.

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>
  );
}

but even though the styling works fine, the console keeps complaining

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

How can I avoid this (console) error?

Code Sandbox

1 Answers

It seems like all you need to do is replace

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

Did that help?

Related