[Snackbar] Support API to create Alert with Snackbar globally

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I think it cacn be used like this example

We can provide an API to create it, it can reduce user's work

Examples 🌈

I have a idea to realize it,

export function TipMessage({ message, duration = 3000, type = 'info', anchorOrigin }) {
  const container = document.createElement('div')
  ReactDOM.render(
    <TipAlert
      message={message}
      duration={duration}
      type={type}
      anchorOrigin={anchorOrigin}
    />,
    container,
  )
  document.querySelector('body').append(container)
}

function TipAlert(props) {
  const [open, setOpen] = useState(true)

  return <>
    <Snackbar open={open} onClose={() => setOpen(false)} anchorOrigin={props.anchorOrigin} autoHideDuration={props.duration}>
      <Alert severity={props.type}>{props.message}</Alert>
    </Snackbar>
  </>
}

Motivation 🔦

It can help developers when they want to give a globl tip on the page.