Css 如何使用react代码中未包含的悬停？

我有以下CSS配置

.my-page {
      &-link {
        font-weight: normal;
        color: green;

        &:hover {
          text-decoration: underline;
          font-weight: 500;
          color: #006cbc;
        }
   }
}

当我将它包含在我的react组件中时，它并不以某种方式包含hover

我已经将“我的页面链接”和“我的=页面链接悬停”作为类名，但两者都不起作用

  <SomeComponent
                      name="here."
                      variant="primary"
                      label="here."
                      className="my-page-link"
                      onClick={this.onEditPaymentMethodModalShow}

                    />

---

我认为您的SASS代码已被破坏。你缺少了一个结束的卷曲括号。 试试这个：

.my-page {
  &-link {
    font-weight: normal;
    color: green;

    &:hover {
      text-decoration: underline;
      font-weight: 500;
      color: #006cbc;
    }
  }
}

此外，您还可以使用来确保您得到了预期的结果

---

希望这有帮助：）

类名应该是什么？下面是这个SASS的结果，这样你就可以看到类名应该保持你写的样子：

。我的页面链接{字体重量：正常；颜色：绿色；}。我的页面链接：悬停{文本装饰：下划线；字体重量：500；颜色：#006cbc；}