点击后Material-UI按钮消失

Question

我有一个按钮，点击后会消失。同样单击一次按钮不会导致任何按钮操作运行。我必须单击该按钮，然后单击该按钮消失后所在的区域才能使我的按钮操作生效。

<Grid className={classes.container} style={{justifyContent: 'flex-end'}} item xs={12}>
            <Button className={classes.addImage} onClick={this.addPic}>
                <input 
                className={classes.takePic} 
                ref="file"
                id="takePic" 
                type="file" 
                accept="image/*"
                onChange={this.onChange}
                />
                Add 
                <br></br>
                Image

            </Button>
        </Grid>

造型：

 addImage: {
    display: 'flex',
    backgroundColor: 'black',
    color: 'white',
    borderRadius: 90,
    height: 100,
    width: 100,
    justifySelf: 'flex-end',
    marginRight: '12.5%',
},

onChange 函数：

    onChange = () => {
    let newfile = this.refs.file.files[0];
    let reader = new FileReader();
    let url = reader.readAsDataURL(newfile);
    reader.onloadend = () => {
        this.setState({
            ...this.state,
            openModal: true,
            imgSrc : [reader.result],
            imageType: newfile.type,
            newfile: newfile,
            filename: `${this.props.user.id}_${Date.now()}`
        })
        console.log(newfile)
        console.log(this.state)

    }
}

添加图片功能：

addPic = () => {
        document.getElementById('takePic').click()
    }

Answer 1

为 Material-UI 的颜色覆盖 CSS 时必须小心Button。如果您覆盖颜色而不遵循Button.

以下是Button处理“文本”变体（默认）颜色的样式的例外情况：

export const styles = theme => ({
  /* Styles applied to the root element. */
  root: {
    color: theme.palette.text.primary,
    transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
      duration: theme.transitions.duration.short,
    }),
    '&:hover': {
      backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
      '&$disabled': {
        backgroundColor: 'transparent',
      },
    },
    '&$disabled': {
      color: theme.palette.action.disabled,
    },
  },
  /* Styles applied to the root element if `disabled={true}`. */
  disabled: {},
});

在您的addImage课堂上，您将按钮更改backgroundColor为黑色和color白色，但您没有处理悬停时应该发生的情况。由于特殊性，Material-UI 的样式将赢得悬停，并且在触摸设备 ( '@media (hover: none)') 上，背景将变为透明，但是您更改color为“白色”（而不是theme.palette.text.primary）仍然有效，如果您的页面背景为白色, 表示您的按钮现在不可见。

您可以通过明确说明悬停时会发生什么来解决此问题，如我在此处的回答所示：如何更改按钮上的波纹背景颜色？.

Button源代码（有关 Material-UI 样式的完整详细信息）：https : //github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.js