Question

我有一个按钮，当单击时它会消失。同时单击一次按钮不会导致任何按钮动作运行。我必须先单击按钮，然后单击按钮消失后的位置才能使按钮动作生效。

using System;
namespace TestApp
{
    class Program
    {
        private static string password = "admin123";

        static void Main(string[] args)
        {
            Console.Write($"My ultra top secret password is: {password}.");
        }
    }
}

样式：

<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>

onChange函数：

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

addPic函数：

    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)

    }
}

Answer 1

在覆盖CSS时应注意Material-UI的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更改为“白色”（而不是{{1} }）仍然有效，如果您的页面背景为白色，则意味着您的按钮现在不可见。

您可以通过明确悬停时发生的情况来解决此问题，如我的答案How do I change the ripple background color on Button?所示。

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

单击后Material-UI按钮消失

1 个答案: