使用makeStyles向材质ui菜单添加动态样式不起作用

Question

我正在尝试以这种方式在材质 ui 菜单上动态生成类：

const useStyles = (props) => {
  return makeStyles({
    paper: props.style,
  });
};

const StyledMenu = (props) => {
  const classes = useStyles(props)();
  return <Menu {...props} className={classes.paper} />;
};

render() {
const { state, fnsMenuBtn, fieldsMenuBtn, props } = this;
const { fnsMenuIsOpen, fieldsMenuIsOpen } = state;
return (
<StyledMenu
          id="fnsMenuEl"
          anchorEl={fnsMenuBtn}
          keepMounted
          open={fnsMenuIsOpen}
          style={{ border: "1px solid blue" }}
          onClose={(e) => {
            vm.setState((state, props) => {
              return {
                fnsMenuIsOpen: !state.fnsMenuIsOpen,
              };
            });
          }}
        >
          {Object.keys(formulajs).map((fnName) => (
            <MenuItem onClick={(e) => {}} key={fnName}>
              {fnName}
            </MenuItem>
          ))}
 </StyledMenu>
)
}

但想要的样式从未添加到菜单中 怎么了 ？ 不然怎么办？

Answer 1

使用className安装尝试使用classes

const StyledMenu = (props) => {
 const classes = useStyles(props)();
 return <Menu {...props} classes={{paper: classes.paper}} />;
};