reactjs - material-ui-popup-state 更改按钮颜色

Question

我正在使用 material-ui-popup-state 创建材质 ui 下拉菜单在我的 Navbar.js 中，我调用 <HoverMenu />组件 HoverMen.js 如下

    import * as React from 'react';
import withStyles from '@material-ui/core/styles/withStyles';
import Menu from 'material-ui-popup-state/HoverMenu';
import MenuItem from '@material-ui/core/MenuItem';
import ChevronRight from '@material-ui/icons/ChevronRight';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import { Link } from 'react-router-dom';

import PopupState, {
  bindHover,
  bindMenu,
  bindToggle
} from 'material-ui-popup-state';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';

const ParentPopupState = React.createContext(null);

const menuStyles = theme => ({
  button: {
    color: 'white'
  }
});
const HoverMenu = () => (
  <PopupState variant="popover" popupId="demoMenu">
    {popupState => (
      <ClickAwayListener onClickAway={popupState.close}>
        <div>
          <IconButton edge="start" {...bindToggle(popupState)}>
            <MenuIcon />
          </IconButton>

          <ParentPopupState.Provider value={popupState}>
            <Menu
              {...bindMenu(popupState)}
              anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
              transformOrigin={{ vertical: 'top', horizontal: 'left' }}
              getContentAnchorEl={null}
            >
              <MenuItem onClick={popupState.close} to="/" component={Link}>
                Home
              </MenuItem>
              <MenuItem onClick={popupState.close} to="/about" component={Link}>
                About
              </MenuItem>

              <Submenu popupId="contribute" title="Contribute">
                <MenuItem
                  onClick={popupState.close}
                  to="/donate"
                  component={Link}
                >
                  To Samidoun
                </MenuItem>
                <MenuItem onClick={popupState.close}>To Benificiary</MenuItem>
                <MenuItem
                  onClick={popupState.close}
                  to="/musicians"
                  component={Link}
                >
                  To Musicians
                </MenuItem>
              </Submenu>
              <MenuItem onClick={popupState.close} to="/" component={Link}>
                Volunteer
              </MenuItem>
              <MenuItem
                onClick={popupState.close}
                to="/contact"
                component={Link}
              >
                Contact
              </MenuItem>
            </Menu>
          </ParentPopupState.Provider>
        </div>
      </ClickAwayListener>
    )}
  </PopupState>
);

export default HoverMenu;

const submenuStyles = theme => ({
  menu: {
    marginTop: theme.spacing(-1)
  },
  title: {
    flexGrow: 1
  },
  moreArrow: {
    marginRight: theme.spacing(-1)
  }
});

const Submenu = withStyles(submenuStyles)(
  // Unfortunately, MUI <Menu> injects refs into its children, which causes a
  // warning in some cases unless we use forwardRef here.
  React.forwardRef(({ classes, title, popupId, children, ...props }, ref) => (
    <ParentPopupState.Consumer>
      {parentPopupState => (
        <PopupState
          variant="popover"
          popupId={popupId}
          parentPopupState={parentPopupState}
        >
          {popupState => (
            <ParentPopupState.Provider value={popupState}>
              <MenuItem
                {...bindHover(popupState)}
                selected={popupState.isOpen}
                ref={ref}
              >
                <span className={classes.title}>{title}</span>
                <ChevronRight className={classes.moreArrow} />
              </MenuItem>
              <Menu
                {...bindMenu(popupState)}
                classes={{ paper: classes.menu }}
                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
                transformOrigin={{ vertical: 'top', horizontal: 'left' }}
                getContentAnchorEl={null}
                {...props}
              >
                {children}
              </Menu>
            </ParentPopupState.Provider>
          )}
        </PopupState>
      )}
    </ParentPopupState.Consumer>
  ))
);

我需要将 HoverMenu 中 IconButton 的颜色更改为白色（主要和次要颜色以外的颜色）

 <IconButton edge="start" {...bindToggle(popupState)}>
            <MenuIcon />
          </IconButton>

但我不知道如何在这种情况下使用 className。谢谢

标签： reactjsmaterial-ui

Answer 1

我找到了如下解决方案。

 <IconButton
            edge="start"
            {...bindToggle(popupState)}
            style={{ color: 'white' }}
          >
            <MenuIcon />
          </IconButton>