javascript - 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 的 Button 颜色的 CSS 时必须小心。如果您覆盖颜色而不遵循 Button 中使用的模式，很容易在触摸设备上产生不良影响(尤其是“悬停”状态)。

以下是 Button 处理“文本”变体(默认)颜色的样式的异常(exception)情况:

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)仍然有效，如果您的页面背景是白色，则意味着您的按钮现在不可见。

您可以通过明确说明悬停时应该发生什么来解决此问题，如我在此处的回答所示:How do I change the ripple background color on Button? .

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