如何在滚动条上更改此 AnchorLink 的颜色?
How do I change the color of this AnchorLink on scroll?
正在尝试更改卷轴上徽标的颜色。目前,导航栏会改变颜色,但我需要徽标随之改变。这是我当前的代码:
navigation.js
return (
<Nav {...this.props} scrolled={this.state.hasScrolled}>
<StyledContainer>
<Brand>
<Scrollspy offset={-64} item={["top"]} currentClassName="active">
<AnchorLink href="#top" onClick={this.closeMobileMenu}>
Brand
</AnchorLink>
</Scrollspy>
</Brand>
</StyledContainer>
</Nav>
)
style.js
export const Brand = styled.div`
font-family: ${props => props.theme.font.extrabold};
${props => props.theme.font_size.regular};
color: ${props => props.theme.color.black.regular};
text-decoration: none;
letter-spacing: 1px;
margin: 0;
ul {
list-style: none;
margin: 0;
padding: 0;
a {
color: ${props => (props.scrolled ? `black` : `white`)};
text-decoration: none;
}
}
`
非常感谢任何帮助 - 非常感谢!
找到答案 - 我只需要在 navigation.js
文件中添加这段代码:
navigation.js
return (
<Nav {...this.props} scrolled={this.state.hasScrolled}>
<StyledContainer>
<Brand {...this.props} scrolled={this.state.hasScrolled}>
<Scrollspy offset={-64} item={["top"]} currentClassName="active">
<AnchorLink href="#top" onClick={this.closeMobileMenu}>
Brand
</AnchorLink>
</Scrollspy>
</Brand>
</StyledContainer>
</Nav>
)
正在尝试更改卷轴上徽标的颜色。目前,导航栏会改变颜色,但我需要徽标随之改变。这是我当前的代码:
navigation.js
return (
<Nav {...this.props} scrolled={this.state.hasScrolled}>
<StyledContainer>
<Brand>
<Scrollspy offset={-64} item={["top"]} currentClassName="active">
<AnchorLink href="#top" onClick={this.closeMobileMenu}>
Brand
</AnchorLink>
</Scrollspy>
</Brand>
</StyledContainer>
</Nav>
)
style.js
export const Brand = styled.div`
font-family: ${props => props.theme.font.extrabold};
${props => props.theme.font_size.regular};
color: ${props => props.theme.color.black.regular};
text-decoration: none;
letter-spacing: 1px;
margin: 0;
ul {
list-style: none;
margin: 0;
padding: 0;
a {
color: ${props => (props.scrolled ? `black` : `white`)};
text-decoration: none;
}
}
`
非常感谢任何帮助 - 非常感谢!
找到答案 - 我只需要在 navigation.js
文件中添加这段代码:
navigation.js
return (
<Nav {...this.props} scrolled={this.state.hasScrolled}>
<StyledContainer>
<Brand {...this.props} scrolled={this.state.hasScrolled}>
<Scrollspy offset={-64} item={["top"]} currentClassName="active">
<AnchorLink href="#top" onClick={this.closeMobileMenu}>
Brand
</AnchorLink>
</Scrollspy>
</Brand>
</StyledContainer>
</Nav>
)