Блог

Я пытаюсь создать простой веб-сайт с нижними вкладками и ящиком. Моя первая проблема заключается в том, что при выборе нижней вкладки она не меняет свой цвет. После использования console.log я заметил, что Значение вкладки (т. Е. 0, 1 и т. Д.) Регистрируется, Что означает, что щелчок по вкладке регистрируется — он просто не меняет стиль. Во-вторых, текст, который я ввожу на главном экране, не меняет цвет в зависимости от темы. Если вы посмотрите на код, я даже жестко запрограммировал текстовый объект в палитре моей темы, но он все равно не меняет цвет. Я попытался обернуть свой JSX с помощью JSX — это привело к изменению текста, но теперь бумага выглядит странно (она не занимает весь главный экран, и я хочу изменить ее фон)

Пожалуйста, предложите, как я могу исправить эти проблемы, поскольку я новичок в интерфейсах React и Material.

Ссылка на CodeSandbox: https://codesandbox.io/s/mui-demo-bghgp?file=/demo.js

Вам нужно передать value prop BottomNavigation компоненту, вот так:

 <BottomNavigation
   className={className}
   showLabels
   onChange={(event, newValue) => {
     console.log(newValue);
     onChange(newValue);
   }}
   value={value} // <----  You are missing this
>
  

Для проблемы с типографикой вы можете добавить в компонент цветовой реквизит, который указывает на переменную темы, которую вы хотите использовать для раскраски шрифта, например:

 <Typography paragraph color="textPrimary">
  Hello
</Typography>
  

Для получения дополнительной информации: https://material-ui.com/api/typography /