在应用栏中突出显示活动页面的问题

Posted 2023-02-21

【中文标题】在应用栏中突出显示活动页面的问题

【英文标题】：Problem in Highlighiting the active page in appbar

【发布时间】：2022-01-02 18:40:06

【问题描述】：

我正在尝试突出显示导航栏中的活动页面，背景颜色为白色，文本颜色为天蓝色。但由于某种原因，我无法看到应用栏中应用的文本天蓝色的颜色。您可以在下面的图片中看到它是如何显示的。

                    <Box>
                        <IconButton>
                            <NavLink to='/' 
                             activeClassName='selected'>
                                <Typography
                                    variant='body1'
                                    style=
                                        marginRight: "1rem",
                                        color: "white",
                                    >
                                    Dashboard
                                </Typography>
                            </NavLink>
                            <NavLink
                                to='/aboutus'
                                activeClassName='selected'>
                                <Typography
                                    variant='body1'
                                    style=
                                        marginRight: "1rem",
                                        color: "white",
                                    >
                                    About Us
                                </Typography>
                            </NavLink>
                            <NavLink
                                to='/contactus'
                                activeClassName='selected'>
                                <Typography
                                    variant='body1'
                                    style=
                                        marginRight: "1rem",
                                        color: "white",
                                    >
                                    Contact Us
                                </Typography>
                            </NavLink>
                        </IconButton>
                    </Box>

用于此的样式在这里：

    .selected 
        background-color: white;
        color: skyblue;
    

【问题讨论】：

我想内联 color: "white" 会导致内联样式的优先级高于基于类的样式。

因为您在 Typography 中添加了颜色样式。您的活动课程正在应用，但您专门将颜色传递给排版，因此它会根据优先级采用该颜色。

【参考方案1】：

因为您在 Typography 中添加了颜色样式。您的活动类正在被应用，但您专门将颜色传递给排版，因此它会根据优先级采用该颜色。

你可以做这样的事情。

.nav-link 
  margin-right: "1rem"; 
  color: "white";

.selected 
  background-color: white;
  color: skyblue;

<Box>
  <IconButton>
    <NavLink to='/' activeClassName='selected' className="nav-link">
      <Typography variant='body1'>
        Dashboard
      </Typography>
    </NavLink>
    <NavLink to='/aboutus' className="nav-link" activeClassName='selected'>
      <Typography variant='body1'>
        About Us
      </Typography>
    </NavLink>
    <NavLink to='/contactus' className="nav-link" activeClassName='selected'>
      <Typography variant='body1'>
        Contact Us
      </Typography>
    </NavLink>
  </IconButton>
</Box>

如果这不起作用，您可以将其添加为一个类并有条件地将其切换为活动状态。

编辑：感谢@DBS 指出先前答案中的错误。

【讨论】：

内联样式仍会覆盖类样式，您需要应用新的内联样式，或使用类应用所有样式以轻松解决此问题。

虽然我们正在应用外部样式，但我们并没有得到想要的输出。非活动页面的颜色不是白色，但它们显示为常规链接

您能分享一下预期结果和当前结果吗？如果可能，也可以分享工作示例。

在 CSS margin-right: "1rem" 中找出问题；白颜色”;我们需要把“”拿出来，我正在和他们一起尝试，这就是我没有得到想要的输出的原因。