如何在滚动时更改此 AnchorLink 的颜色？答案

【问题标题】：How do I change the color of this AnchorLink on scroll?如何在滚动时更改此 AnchorLink 的颜色？
【发布时间】：2021-05-09 02:46:18
【问题描述】：

试图改变滚动标志的颜色。目前，导航栏改变颜色，但我需要改变它的标志。这是我当前的代码：

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

非常感谢任何帮助 - 非常感谢！

【问题讨论】：

标签： javascript css reactjs scroll onscroll

【解决方案1】：

找到答案 - 我只需在 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>
    )

【讨论】：