Question

我正在使用 react with styled component 和 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";

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

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

Answer 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);

使用样式组件响应滚动不起作用

1 个答案: