如何使用 styled-components 将 Gatsby Link 组件的填充设置为 0px

Question

我使用 styled-components 对 Gatsby Link 组件进行了一些样式更改。但是出于某种原因，当我尝试应用 0px 的填充时，它仍然会留下微小的 space（几像素）above/below 文本（在文本和 top/bottom 边框之间）。我在 codesandbox 中使用 gatsby-default-starter 进行初始构建。

HTML/CSS 环境 (codepen.io): https://codepen.io/marti2221/pen/mNVJWZ

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

我已经尝试在 Gatsby 环境以及正常的 html/css 环境中通过样式组件应用填充。当 css/html 环境中的 "a" 标签的 padding 设置为 0px 时，文本周围没有 space，正如预期的那样。但是，当我尝试将相同的填充添加到 gatsby Link 组件甚至是常规 a 标签时，在 gatsby 环境中，文本和边框之间有一个微小的 space。这导致我的 BtnLink 在 top/bottom 上的填充比预期的要大。我可以相应地调整我的填充，但我想知道这个问题的根本原因。

    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 填充）。我的结果是 link 文本，在 Gatsby 环境中周围有一些间距。使用常规 HTML/CSS 进行测试时，结果符合预期（当 padding 设置为 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>
)

如何使用 styled-components 将 Gatsby Link 组件的填充设置为 0px

How to set padding of Gatsby Link Component to 0px with styled-components

javascript

css

padding

gatsby

styled-components