用于警报状态的 Material-ui 快餐栏组件？答案

【问题标题】：Material-ui snackbar component for alert status?用于警报状态的 Material-ui 快餐栏组件？
【发布时间】：2020-07-23 17:16:03
【问题描述】：

您好，我是 react 和 material-ui 的新手，我正在尝试使用小吃栏组件 https://material-ui.com/es/components/snackbars/#customized-snackbars，但我不确定是否必须为演示中显示的每种警报创建单独的组件？

【问题讨论】：

到目前为止你尝试过什么？问题是什么？请提供一些代码，否则真的很难提供帮助。
您分享的链接上的代码沙箱示例 (codesandbox.io/s/bskf0) 没有帮助？
我不明白的是如何只使用一个组件然后改变它的颜色
分享你的代码。

标签： reactjs material-ui

【解决方案1】：

示例如下：

import React, {useState} from "react";
import Button from "@material-ui/core/Button";
import Snackbar from "@material-ui/core/Snackbar";

export default function SnackbarExample() {
    const [state, setState] = useState({
        open: false,
        vertical: 'top',
        horizontal: 'center',
    });

    const {vertical, horizontal, open} = state;

    const handleClick = (newState) => () => {
        setState({open: true, ...newState});
    };

    const handleClose = () => {
        setState({...state, open: false});
    };

    return (
        <div>
            <Button onClick={handleClick({vertical: 'top', horizontal: 'center'})}>Top-Center</Button>
            <Button onClick={handleClick({vertical: 'top', horizontal: 'right'})}>Top-Right</Button>
            <Button onClick={handleClick({vertical: 'bottom', horizontal: 'right'})}>
                Bottom-Right
            </Button>
            <Button onClick={handleClick({vertical: 'bottom', horizontal: 'center'})}>
                Bottom-Center
            </Button>
            <Button onClick={handleClick({vertical: 'bottom', horizontal: 'left'})}>Bottom-Left</Button>
            <Button onClick={handleClick({vertical: 'top', horizontal: 'left'})}>Top-Left</Button>
            <Snackbar
                anchorOrigin={{vertical, horizontal}}
                key={`${vertical},${horizontal}`}
                open={open}
                onClose={handleClose}
                message="I love snacks"
            />
        </div>
    );
}

Source

【讨论】：