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

Question

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

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

Answer 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 指出先前答案中的错误。