Стилизация BottomNavigation в React.js Material-UI - PullRequest
Новая
       58

Стилизация BottomNavigation в React.js Material-UI

0 голосов
/ 26 января 2019

Как изменить цвет значка и текста выбранной ссылки (в данном примере «Домашняя страница») на красный, а цвет значка и текста неактивных ссылок (в данном примере «Курс и авторы») на зеленый? Документы очень тонкие.

enter image description here

class MyBottomNavigation extends Component {

  render() {
    return (
      <Paper zDepth={1}>
        <BottomNavigation selectedIndex={this.state.selectedIndex}>

          <BottomNavigationItem
            label="Home"
            icon={recentsIcon}
          />

          <BottomNavigationItem
            label="Course"
            icon={favoritesIcon}
          />

          <BottomNavigationItem
            label="Authors"
            icon={nearbyIcon}
          />
        </BottomNavigation>
      </Paper>
    )
  }
}

export default MyBottomNavigation

1 Ответ

0 голосов
/ 26 января 2019

Существует три отдельных источника информации для большинства компонентов Material-UI:

Каждый компонент документирует в документации API классы, которые можно передать через свойство classes для переопределениястили для различных аспектов компонента.

В этом случае компонент, о котором мы заботимся, - BottomNavigationAction.В разделе CSS документации API вы найдете:

root Стили, примененные к корневому элементу.

selected Стили, примененные ккорневой элемент, если он выбран.

Видя это, вы можете сначала попробовать: 

const styles = {
  root: {
    color: "green"
  },
  selected: {
     color: "red"
  }
};

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

Ниже приведена упрощенная версия стилей BottomNavigationAction (ямы включили только части, относящиеся к управлению этими двумя цветами): 

export const styles = theme => ({
  /* Styles applied to the root element. */
  root: {
    color: theme.palette.text.secondary,
    '&$selected': {
      color: theme.palette.primary.main,
    },
  },
  /* Styles applied to the root element if selected. */
  selected: {},
});

Если мы смоделируем наши переопределения того, как это структурировано, мы находим успех.Окончательный результат выглядит следующим образом: 

import React from "react";
import Paper from "@material-ui/core/Paper";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import RestoreIcon from "@material-ui/icons/Restore";
import FavoriteIcon from "@material-ui/icons/Favorite";
import LocationOnIcon from "@material-ui/icons/LocationOn";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  root: {
    color: "green",
    "&$selected": {
      color: "red"
    }
  },
  selected: {}
};

class MyBottomNavigation extends React.Component {
  render() {
    const actionClasses = this.props.classes;
    return (
      <Paper zDepth={1}>
        <BottomNavigation value={1} showLabels={true}>
          <BottomNavigationAction
            classes={actionClasses}
            label="Home"
            icon={<RestoreIcon />}
          />

          <BottomNavigationAction
            classes={actionClasses}
            label="Course"
            icon={<FavoriteIcon />}
          />

          <BottomNavigationAction
            classes={actionClasses}
            label="Authors"
            icon={<LocationOnIcon />}
          />
        </BottomNavigation>
      </Paper>
    );
  }
}
export default withStyles(styles)(MyBottomNavigation);

Edit wq02759kk

Вот некоторые дополнительные ресурсы здесь, в переполнении стека, на некоторые похожие вопросы, на которые я ответил относительно других Материалов-UI компоненты:

...