用样式化组件反应滚动不起作用答案

【问题标题】：react scroll with styled component is not working用样式化组件反应滚动不起作用
【发布时间】：2021-08-01 17:30:55
【问题描述】：

我正在使用带有样式组件的 react 和 react-scroll 来创建一个简单的菜单。我想做一个单页应用程序。一切都很好，但是当我滚动到页面的特定部分时，它应该显示该选项卡已在我的导航上激活。但它根本不起作用。

<Nav>
        <NavBarCotainer>
          <NavMenu>
            <NavItem>
              <NavLink
                to="about"
              >
                About Us
              </NavLink>
            </NavItem>
          </NavMenu>
        </NavBarCotainer>
      </Nav>

在我的样式组件中，我有

export const NavLink = styled(LinkS)`
  color: blue;
  &:active {
    color: red;
  }
`;

当我单击任何链接时，它会快速变为红色，但又会变为蓝色，当我访问该部分时，它根本不会变为红色。

如果我将其更改为：

  &.active {
    color: red;
  }

import { Link as LinkS } from "react-scroll";

它根本不会做任何事情，当我访问页面的一部分时，它总是蓝色的。

我该如何解决这个问题，我做错了什么？

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

您可以使用镭模块进行伪 css 实现。

import Radium from 'radium'

const style = {
  color: 'blue',
  ':active': {
    color: 'red'
  }
};

const MyComponent = () => {
  return (
    <Nav>
    <NavBarCotainer>
      <NavMenu>
        <NavItem>
          <NavLink
            to="about"
            style={style}
          >
            About Us
          </NavLink>
        </NavItem>
      </NavMenu>
    </NavBarCotainer>
  </Nav>
  );
};

const MyStyledComponent = Radium(MyComponent);

【讨论】：