Материал-интерфейс смены цвета, без создания нового для каждого цвета?

Question

как мне изменить цвет закусочной без необходимости создавать новую в материале - нужно ли создавать новую для каждого цвета? В примере с песочницей у них только один цвет, остальные - stati c

Answer 1

snackbar не имеет определенных c настроек цвета, но содержимое панели закусок может быть любым по вашему желанию.

Например, вы можете поместить компонент <Alert> внутри панели закусок и компонент предупреждения materia имеет несколько значений для severity, который управляет цветом предупреждения.

Это создаст зеленое предупреждение:

<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
  <Alert onClose={handleClose} severity="success">
    This is a success message!
  </Alert>
</Snackbar>

Это создаст красное предупреждение:

<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
  <Alert onClose={handleClose} severity="error">
    This is a success message!
  </Alert>
</Snackbar>

Зеленый и красный цвета происходят из <Alert> компонента .

Answer 2

Вам не нужно создавать различные компоненты, все, что вам нужно сделать, это использовать хуки для передачи свойств для изменения компонента

 <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
    <Alert onClose={handleClose} severity={severity}>
    {message}
    </Alert>
    </Snackbar>

Таким образом, вы можете передать нужное сообщение и серьезность хочу в одном компоненте вот рабочий пример

https://codesandbox.io/s/delicate-frost-itv99

Редактировать:

Как указал Декель, <Alert> - это другой компонент и это тот, кто получает серьезность и сообщение.