在 React.js 中設置 BottomNavigation 樣式 Material-UI

Question

如何將所選鏈接（本例中為“主頁”）的圖標和文本顏色更改為紅色，並將非活動鏈接（本例中為“課程”和“作者”）的圖標和文本顏色更改為綠色？ 文檔非常薄。

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

Answer 1

大多數 Material-UI 組件都有三個獨立的信息源：

• 組件演示
  • https://material-ui.com/components/bottom-navigation/
• 組件和相關組件的 API 文檔。 此鏈接將出現在相應演示的底部。
  • https://material-ui.com/api/bottom-navigation/
  • https://material-ui.com/api/bottom-navigation-action/

• 源代碼。 API 頁面底部附近將出現一個鏈接，例如

  由於以下自定義點之一，您可以覆蓋組件的樣式：

  • 帶有classes對象 prop的規則名稱。
  • 具有全局類名。
  • 帶有主題和overrides屬性。

  如果這還不夠，您可以檢查組件的實現以獲取更多詳細信息。

  • https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/BottomNavigation/BottomNavigation.js
  • https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js

API 文檔中的每個組件都記錄了您可以通過classes屬性傳入的classes以覆蓋組件不同方面的樣式。

在這種情況下，我們關心的組件是BottomNavigationAction 。 在 API 文檔的CSS部分，您會發現：

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);

以下是我在 Stack Overflow 上回答的一些關於其他 Material-UI 組件的類似問題的其他資源：

• 使用 React material-ui 更改 OutlinedInput 的輪廓
• 設置TextField高度material-ui
• 如何將樣式應用於 JSS 中的子類

Answer 2

從5.* version開始，您可以使用sx道具

組件底部導航

<BottomNavigation
  sx={{
    bgcolor: 'purple',
    '& .Mui-selected': {
      '& .MuiBottomNavigationAction-label': {
        fontSize: theme => theme.typography.caption,
        transition: 'none',
        fontWeight: 'bold',
        lineHeight: '20px'
      },
      '& .MuiSvgIcon-root, & .MuiBottomNavigationAction-label': {
        color: theme => theme.palette.secondary.main
      }
    }
  }}
>
...
</BottomNavigation>

Answer 3

另一種類似的解決方案：

如果您的元素的顏色是由主題定義的（並且我們可以看到它們是，通過@ryan-cogswell 上面的解釋，或者通過 API 提供的這個鏈接），而不是覆蓋樣式，我們可以簡單地設置一個自定義主題：

const navTheme = createMuiTheme({
    palette: {
        primary: {
            main: '#00FF00'
        },
        text: {
            secondary: '#FF0000'
        }
    }
})

並將導航欄包裝在<ThemeProvider theme={navTheme}>標簽集中。

請注意，對於BottomNavigation元素，未指定背景顏色，因此您仍需要使用自定義樣式來執行此操作。