Как сделать styled button disabled

Question

У меня есть кнопка, хотя это тег <a>

    const AddPostBtn = styled.a`
      font-style: normal;
      font-weight: 300;
      font-size: 14px;
      line-height: 16px;
      color: #ffffff;
      background: #67bfff;
      box-shadow: 8px 10px 25px rgba(148, 174, 213, 0.15);
      border-radius: 10px;
      position: absolute;
      width: 139px;
      height: 25px;
      left: 50%;
      top: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translate(-50%);
      cursor: pointer;
    `;

я хочу чтобы в зависимости от состояния(state), у меня кнопка отключалась(disabling),

      <AddPostBtn
        disabled={showBtn}
        onClick={() => router.push(href)}
      >
        {text}
      </AddPostBtn>

showBtn - это состояния(state), он меняется, всё ок, но кнопка не отключалась(disabling). Возможно это из-за styled я в них не силен, подскажите как здесь это реализовать.

Answer 1

Может это вам поможет

.disabled {
  pointer-events: none;
  color: gray;
}

<a href="https://google.com" class="disabled">ТЕСТ</a><br/>
<a href="https://google.com">ТЕСТ</a>

БЛОГ НА HUSL

Как сделать styled button disabled

Ответы (1 шт):