React Scroll与Material-UI按钮激活链接样式不生效求助

问题 #

页面内跳转功能正常，但为激活状态链接添加的CSS样式未生效。尝试的CSS代码：

.active{
 background-color: 'red';
}

对应的组件代码：

{pages.map((page) => (
  <Link
    to={page.link}
    spy={true}
    smooth={true}
    offset={-100}
    duration={500}
    activeClass="active"
    key={page.id}
  >
    <Button
      key={page.id}
      sx={{
        my: 2,
        color: "black",
        display: "block",
      }}
    >
      {page.title}
    </Button>
  </Link>
))}

解决步骤 #

1. 修正CSS语法错误 #

CSS属性值不需要添加单引号，将'red'改为red即可：

.active {
  background-color: red;
}

2. 处理Material-UI Button的样式优先级 #

active类是添加在Link元素上的，但实际交互的是内部的Button组件，而Material-UI的sx样式优先级较高，需要把样式作用到Button上，两种方法可选：

方法一：使用后代选择器定位Button

通过Link的active类直接选中内部的Button组件：

.active button {
  background-color: red;
  color: white; /* 可选：修改激活状态的文字颜色 */
}

方法二：通过状态控制Button样式

利用React Scroll的回调函数设置状态，动态修改Button的sx样式：

{pages.map((page) => {
  const [isActive, setIsActive] = useState(false);
  return (
    <Link
      to={page.link}
      spy={true}
      smooth={true}
      offset={-100}
      duration={500}
      onSetActive={() => setIsActive(true)}
      onSetInactive={() => setIsActive(false)}
      key={page.id}
    >
      <Button
        key={page.id}
        sx={{
          my: 2,
          color: isActive ? "white" : "black",
          backgroundColor: isActive ? "red" : "transparent",
          display: "block",
        }}
      >
        {page.title}
      </Button>
    </Link>
  );
})}

3. 验证跳转目标匹配 #

确保页面中对应跳转目标的Element组件的name属性，与Link的to属性值完全一致，否则activeClass不会被正确添加到Link上。

内容的提问来源于stack exchange，提问作者Shoppe