<a>标签包裹Button组件后按钮被截断，如何恢复正常尺寸？

问题根源通常是<a>标签默认的行内元素特性，无法正确容纳带有内边距、固定高度的按钮组件，导致布局异常。可以尝试以下几种解决办法：

• 给a标签添加适配样式
  给<a>标签设置display: inline-block，让它能正确包裹按钮的尺寸：

  <a href='/users/create' style={{ display: 'inline-block' }}>
    <Button
      type='button'
      color='white'
      bg='buttons.green'
      boxShadow='md'
      _hover={{
        bg: 'buttons.greenHover',
      }}
    >
      Register
    </Button>
  </a>
  

• 使用Button组件自带的跳转属性
  如果你用的是Chakra UI这类支持自定义渲染标签的UI库，可以直接让Button以a标签的形式渲染，省去额外包裹的步骤，避免样式冲突：

  <Button
    as="a"
    href='/users/create'
    type='button'
    color='white'
    bg='buttons.green'
    boxShadow='md'
    _hover={{
      bg: 'buttons.greenHover',
    }}
  >
    Register
  </Button>
  

• 排查全局样式影响
  检查项目全局CSS中是否给<a>标签设置了line-height、height、overflow等限制样式，这些也可能导致按钮被截断，调整对应样式即可恢复正常。

内容的提问来源于stack exchange，提问作者alanfljesus