如何使用样式组件将Gatsby链接组件的填充设置为0px

Question

我已使用样式化组件对Gatsby Link组件进行了一些样式更改。 但是由于某种原因，当我尝试应用0px的填充时，它仍然在文本上方/下方（文本与顶部/底部边框之间）留出很小的空间（几px）。 我在codesandbox中使用了gatsby-default-starter进行初始构建。

HTML / CSS Env（codepen.io）： https ：//codepen.io/marti2221/pen/mNVJWZ

盖茨比环境（codesandbox）： https ://codesandbox.io/s/gatsby-paddinglink-spacing-gedtq

我尝试在Gatsby环境以及普通的html / css环境中通过样式组件应用填充。 在css / html环​​境中，将“ a”标签上的padding设置为0px时，文本周围将没有空格。 但是，当我尝试向gatsby Link组件甚至常规标签添加相同的填充时，在gatsby环境中，文本和边框之间只有很小的空间。 这导致BtnLink在顶部/底部的填充比预期的大。 我可以相应地调整填充，但我想知道此问题的根本原因。

    const StyledLink = styled(Link)`
      display: inline-block;
      font-family: sans-serif;
      border-radius: 25px;
      padding: 0px;
      text-decoration: none;
      border: 2px solid green;
    `
    const StyledA = styled.a`
      display: inline-block;
      font-family: sans-serif;
      border-radius: 25px;
      padding: 0px;
      text-decoration: none;
      border: 2px solid green;
    `

    const BtnLink = props => (
      <StyledLink {...props}>{props.children}</StyledLink>
    )

    const IndexPage = () => (
      <Layout>
        <BtnLink to="page-2">Request Quote</BtnLink>
        <StyledA href="page-2">Request Quotes</StyledA>
        <Link to="page-2">Link</Link>
      </Layout>
    )

我希望得到的结果是一个gatsby Link组件，可以将其样式设置为与常规link元素相同（即0px填充）。 我的结果是在盖茨比环境中的链接文本周围有一定间距。 使用常规HTML / CSS进行测试时，结果与预期的一样（填充设置为0px时无空格）

Answer 1

您已经制作了一个styled(Link) styledComponent，并将其保存到const StyledLink 。

const StyledLink = styled(Link)`
  display: inline-block;
  font-family: sans-serif;
  border-radius: 25px;
  padding: 0px;
  text-decoration: none;
  border: 2px solid green;

但是，这不会对常规gatsby Link组件产生任何影响。 如果要在页面上看到该样式的变体，则仍然需要呈现此新的StyledLink styledComponent 而不是 gatsby Link组件。

const IndexPage = () => (
<Layout>
    <BtnLink to="page-2">Request Quote</BtnLink>
    <StyledA href="page-2">Request Quotes</StyledA>
    <StyledLink to="page-2">Link</StyledLink>
</Layout>
)