javascript - React Link 组件在使用时丢失 css 或 magin 对齐

Question

我有一个标题，我在其中使用了 css 网格，在其中一个区域中，我找到了 2 个按钮，这些按钮在父级中使用“display: grid”，在子级中使用“margin: auto”。按钮正确居中是 2 个按钮，但是如果我想添加 Link 组件并将按钮放在里面，它看起来不再居中但失去了 css 的对齐但保持了原始按钮的所有样式，就好像它失去了 margin 。

它应该垂直对齐，但如果我使用 Link 组件，它会顶部对齐。

尝试为链接组件添加边距但无法修复。

    <div className="loginArea">
      <button type="button" className="botonComun">
        <FontAwesomeIcon icon={faUserPlus} /> Registro
      </button>
      <Link to="/login">
      <button type="button" className="botonComun">
        <FontAwesomeIcon icon={faSignInAlt} /> Entrar
      </button>
      </Link>
    </div>


  .loginArea {
    grid-area: loginArea;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: max-content max-content;
    grid-gap: 12px;
    padding-right: 25px;
    padding-left: 25px;
  }
}

Link {
  margin: auto;
  width: max-content;
  height: max-content;
}

.botonComun {
  border: 0;
  border-radius: 4px;
  background-color: $purpura;
  margin: auto;
  font-weight: 700;
  font-size: 0.7em;
  font-family: $fuenteprimaria;
  color: $blanco;
  padding: 12px 20px 12px 20px;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  cursor: pointer;

  &:hover {
    background-color: $azul;
  }
}

修复

我忘记了按钮，只是用按钮类对 Link 组件进行了样式化

Answer 1

使用 onClick 调用一个函数来完成链接组件的工作。

const handleClick = () => {
  props.history.push('/route');
}
return(
...
<li onClick={handleClick}>mylink</li>
...
 )