小编Cod*_*der的帖子

在这个https://material-ui.com/utils/popover/#mouse-over-interaction 的例子中material-ui

对于示例https://material-ui.com/utils/popover/#mouse-over-interaction，请按照以下步骤操作 material-ui

1. 在上面的示例中，将鼠标保持在文本上Hover with a Popover. --- 您会看到popover

2. 尝试将鼠标移到popover---附近popover消失，对吗？但即使我悬停在上面，我也想显示弹出框 popover

并使只有酥料饼的消失，如果用户未悬停在任popover或Hover with a Popover.（基本上anchorEl）

我正在从他们的演示中复制代码

  import React from 'react';
    import PropTypes from 'prop-types';
    import Popover from '@material-ui/core/Popover';
    import Typography from '@material-ui/core/Typography';
    import { withStyles } from '@material-ui/core/styles';

    const styles = theme => ({
      popover: {
        pointerEvents: 'none',
      },
      paper: {
        padding: theme.spacing.unit,
      },
    });

    class MouseOverPopover extends React.Component {
      state = {
        anchorEl: …

我正在使用material-ui

我的反应组件如下：

import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import React from "react";
import { withStyles } from "@material-ui/core/styles";

const styles = (theme) => ({
});

class SomeComponent extends React.Component {
  static propTypes = {

  };

  state = {
    checked: true,
  }

  handleChange = name => event => {        
    event.persist()
    this.setState({ 
      [name]: event.target.checked 
    }, () => {
      if (event.target.checked) {
        this.props.parentMethod1(event.target.value)
      } else {
        this.props.parentMethod2(event.target.value)
      }
    });
  };

  render() {
    const { user } = this.props;
    return (
      <div> …

无法更改禁用按钮的样式。我尝试了这里讨论的方法https://github.com/mui-org/material-ui/issues/13779

美版-

"@material-ui/core": "3.8.1",

"@material-ui/icons": "3.0.1",

           const styles = theme => ({
              fabButton: {
                 boxShadow: 'none',
                 backgroundColor: '#fff', 
              },
              disabled: {
                 backgroundColor: '#fff', 
              },
             icon: {
                width: '20px', 
                 height: '20px', 
                 color: grey[600],
               },
            });


          <Hint title="Previous">
              <Fab 
                size="small" 
                classes={{
                  root: classes.fabButton,
                  disabled: classes.disabled
                }}
                disabled={true}
                component="div"
                onClick={onClickHandle}
              >
                <IconChevronLeft className={classes.icon} />
              </Fab>
            </Hint>

或者

           const styles = theme => ({
              fabButton: {
                 boxShadow: 'none',
                 backgroundColor: '#fff', 
                 '&:disabled': {
                      backgroundColor: '#fff',   
                 }
              },
              icon: {
                 width: '20px', 
                 height: '20px', 
                 color: …