Как использовать Цвет, который мы установили в функции createMuiTheme файла App.js в дочернем компоненте в реакции

Question

Я новичок, чтобы реагировать. На самом деле я установил основной цвет для моего приложения реакции с помощью muithemeprovider. Как показано ниже:

Каждый раз, когда загружается это приложение, основной цвет устанавливается случайным образом. Теперь мне нужно установить тот же цвет для кнопки, присутствующей внутри некоторых дочерних компонентов. Поэтому мне нужно получить значение основного цвета внутри дочерних компонентов. Я не получил никакой подсказки, чтобы получить значение основного цвета в другом компоненте. Запрос вашей помощи.

Answer 1

Вам нужно экспортировать свою тему, а затем передать ее в компонент ThemeProvider , который вы должны реализовать в корне своего приложения. Это передаст его по дереву React и сделает вашу тему доступной для каждого дочернего компонента.

В каждом дочернем компоненте, где вы собираетесь использовать тему, вы можете напрямую вызывать тему и ее свойства. Например, если вы пытаетесь стилизовать компонент Button, вы должны сделать это следующим образом:

<Button
 type="submit"
 fullWidth
 variant="contained"
 color="primary"
>
  Sign In
</Button>

'color = "primary"' относится к основному атрибуту цвета, установленному в вашей теме, этозатем становится доступным благодаря реализации компонента ThemeProvider.