如何使用未包含在反应代码中的悬停？

Question

我有以下CSS配置

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

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

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

我已经将 "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 来确保您得到您期望的结果。

希望这对您有所帮助:)

如何使用未包含在反应代码中的悬停？

How to use hover not included in the react code?

css

hover

less

reactjs