Question

我正在使用React，我想呈现一个按钮元素或一个Link（转换为锚标记）

if (this.props.link) {
  e = (
    <Link
      className={["button link", this.props.className].join(' ')}
      to={this.props.link}
    >
      {this.props.buttonLabel}
    </Link>
  )
} else {
  e = (
    <button
      className={["button", this.props.className].join(' ')}
      type={this.props.type}
    >
      {this.props.buttonLabel}
    </button>
  );
}

return e;

我查找了默认按钮和锚点样式并将其标准化。我仍然有一个问题。上的文字垂直和水平居中，但上的文字仅水平居中。我什至可以将所有计算出的样式复制到按钮上，并将它们应用于anchor标签所共享的同一类。为了安全起见，我还标准化了.link类，我相信它是由React Links添加的。

这是怎么回事？这是CSS供参考。

.button, .link {
  /* Normalize anchors nad buttons */
  display: inline-block;
  cursor: pointer;
  outline: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  background-color: var(--primary);
  color: black;
  text-decoration: none !important;
  text-shadow: none;
  font: unset;
  font-family: 'Source Sans Pro';
  font-size: 1rem;
  text-align: center;
  text-rendering: auto;
  text-indent: 0;
  text-transform: none;
  align-items: unset;
  justify-content: center;
  vertical-align: middle;
  line-height: 1rem;
  height: 3rem;
  width: 8rem;
  writing-mode: horizontal-tb;
  word-spacing: 0;
  font-stretch: 100%;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-east-asian: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  letter-spacing: normal;
  -webkit-appearance: none;
  -webkit-border-image: none;
}

Answer 1

您有两个选择；

设置display: tabel-cell;，以便您的vertical-align: middle;适用；或
设置line-height: 3rem;，使其与您的按钮高度匹配。

我还建议使用实用程序库在React中有条件地将className连接在一起，例如https://github.com/JedWatson/classnames。

如何使锚标签和按钮标签具有相同的样式？

1 个答案: