I'm attempting to make the active page in my navbar stand out by giving it a white background color and skyblue text. However, for some reason, I can't get the text color to display as skyblue in the appbar. You can see how it currently looks in the attached image below.
<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>
The CSS styles being applied here are:
.selected {
background-color: white;
color: skyblue;
}