底部导航材质 UI 覆盖

Question

我正在尝试从材质 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

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

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

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

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

完整代码示例

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