css - 如何使用未包含在 react 代码中的悬停？

Question

我有以下 CSS 配置

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

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

当我将它包含在我的 React 组件中时，它不会以某种方式包含悬停。

我将“my-page-link”和“my=page-link-hover”作为类名包含在内，但两者都不起作用。

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

                    />

Answer 1

我相信您的 SASS 代码有问题。您缺少一个右大括号。 试试这个:

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

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

您也可以使用 SASS playground以确保您得到预期的结果。

希望这有帮助:)