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

Posted 2021-04-14

我有以下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”作为classNames包含在内，但两者都不起作用。

  <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 playground确保您得到您期望的。

希望这可以帮助 ：）