底部导航材质 UI 覆盖

Question

我正在尝试从 Material UI [此处][1] 覆盖底部导航图标的颜色。这是我的 CSS 代码：

.MuiButtonBase-root{
    color: #007A78;
}

.MuiBottomNavigationAction-root{
    color: #007A78;
}

.Mui-selected{
    color: #007A78;
}

我正在尝试将默认蓝色更改为我的颜色（绿色）。但是，我只注意到文本改变了颜色，而不是图标： [![在此处输入图像描述][2]][2] 我使用元素来查看css，显然图标的颜色没有改变。它仍然是相同的蓝色。 [![在此处输入图片描述][3]][3]

有谁知道如何覆盖它？ [1]：https://mui.com/api/bottom-navigation-action/ [2]：https://i.stack.imgur.com/cG9DW.png [3]：https://i.stack.imgur.com/joxTL.png

Answer 1

您可以使用sx 从Material UI 更新bottom navigation 组件的样式。您可以单独设置类的样式，以根据 UI 应用不同的样式。

sx={{
   "& .MuiBottomNavigationAction-root, .Mui-selected, svg": {
     color: "#007A78"
   }
}}

要仅设置活动导航项的样式，您可以定位.Mui-selected 类，如下所示

sx={{
    "& .Mui-selected, .Mui-selected > svg": {
      color: "#007A78"
    }
}}

完整代码example

import * as React from "react";
import Box from "@mui/material/Box";
import BottomNavigation from "@mui/material/BottomNavigation";
import BottomNavigationAction from "@mui/material/BottomNavigationAction";
import RestoreIcon from "@mui/icons-material/Restore";
import FavoriteIcon from "@mui/icons-material/Favorite";
import LocationOnIcon from "@mui/icons-material/LocationOn";

export default function SimpleBottomNavigation() {
  const [value, setValue] = React.useState(0);

  return (
    <Box sx={{ width: 500 }}>
      <BottomNavigation
        showLabels
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
        sx={{
          "& .MuiBottomNavigationAction-root, .Mui-selected, svg": {
            color: "#007A78"
          }
        }}
      >
        <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
        <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
        <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
      </BottomNavigation>
    </Box>
  );
}