Цвет Material-Ui по умолчанию — синий. Я покажу вам, как изменить цвет по умолчанию в два этапа.

  1. Полное изменение цвета по умолчанию.
  2. Изменить цвет по умолчанию в определенном компоненте.

Прежде всего, создайте свое приложение для реагирования

npx create-реагировать на ваше приложение

Затем установите Material-Ui

npm install @material-ui/core

Шаг 1.

У меня есть два файла в каталоге src. Один из них — основной файл App.js, а второй — demo.js демонстрационный файл. Настройте файл App.js. Так…

И посмотрите мой файл demo.js

По умолчанию цвет контура текстового поля синий. Так…

После того, как вы следовали моему коду, ваш вывод будет таким:

Здесь я использовал шоколадный цвет.

Помните: Material-Ui не поддерживает название цвета в createTheme. (Пример: красный, желтый, зеленый). Если вы сделаете это, вам может потребоваться импортировать цвет из Material-Ui. Это не рекомендуется. Рекомендуемый способ - использовать шестнадцатеричный код. (Пример: #d2691e)

Шаг 2:

Вы можете изменить цвет по умолчанию в конкретном компоненте. Например, у меня есть файл ChangeColor.jsx в каталоге src.

И конечный результат…

Я попытался объяснить идеально. Это была моя первая статья на Medium. Пожалуйста, поддержите меня комментариями и аплодисментами. И, спасибо, что дочитали до конца.