CODEWITHSUNDEEP
cssreactjsmaterial-ui
ganesh kaspate
ganesh kaspate

Reputation: 2685

Material UI Menu component is not getting the styles applied in react

I am new to material-UI , Here I have menu compoent which looks like,

<Menu
    classes={{ paper: css.paperMenu }}
    className={classNames({
      [css.menuMarginTop]: true
    })}

>

.menuMarginTop {
  margin-top: 14px;
}

also has other props as well. Now, when I am trying to add the styles on the basis of prop then the style menuMarginTop is not getting applied, can any one let me know how to do this ?.

Thanks.

Upvotes: 0

Views: 1568

Answers (1)

Harsh kurra
Harsh kurra

Reputation: 1216

It seems like you are using normal CSS, but material-UI uses JSS underlying as their styling solutions, You can read about there styling solutions here, and how to customize the CSS of components here.

You Can do this in your case

import Menu from "@material-ui/core/Menu";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  paperMenu: {
    color: "red"
  },
  menuMarginTop: {
    color: "blue"
  }
}));

export default function App(props) {
  const classes = useStyles();
  return (
    <Menu
      classes={{ paper: classes.paperMenu }}
      className={classes.menuMarginTop}
    />
  );
}

Here, classes.paperMenu will override the underlying paper(component) class, and menuMarginTop will get applied to the root element of the Menu component. Material-UI generate unique Class name randomly at runtime so you can't rely on fixed class name like other libraries, you can only override the underlying class using classes props, more info in the above links

Remember this is one of the ways to override the classes there are other ways as well like HIgher order component withStyles, withTheme etc, above links will provide you with enough information

Upvotes: 2

Related Questions