使用 styled-components 在组件/元素之间共享样式

Question

我正在与 Gatsby 一起使用样式组件。我使用 styled-components 来设置LinkGatsby 为我的主页提供的组件的样式。

const HomePageLink = styled(Link)`
  display: inline-block;
  font-size: ${fontSizes.xxlarge};
  text-decoration: none;
  box-shadow: none;
  :link,
  :visited {
    color: ${colors.slate};
  }
  :hover,
  :active {
    color: ${colors.red};
  }
`

但是我意识到我还需要<a />使用完全相同的样式来设置纯 html 标签的样式。我想知道有没有办法让上面的样式组件适应<a />标签而不需要像这样重复代码

const HomePageAnchorTag = styled.a`
  display: inline-block;
  font-size: ${fontSizes.xxlarge};
  text-decoration: none;
  box-shadow: none;
  :link,
  :visited {
    color: ${colors.slate};
  }
  :hover,
  :active {
    color: ${colors.red};
  }
`

Answer 1

是的，使用cssAPI可以让您构建可重用的 CSS 块。

一个辅助函数，用于通过插值从模板文字生成 CSS。

import styled, { css } from 'styled-components';
const reusableCSS = css`
  display: inline-block;
  font-size: ${fontSizes.xxlarge};
  text-decoration: none;
  box-shadow: none;
  :link,
  :visited {
    color: ${colors.slate};
  }
  :hover,
  :active {
    color: ${colors.red};
  }
`;

const HomePageAnchorTag = styled.a`
  ${reusableCSS}
`;

const HomePageLink = styled(Link)`
  ${reusableCSS}
`;

通常，您会注意到一个mixins.js包含可重用块导出的文件css，例如：

// mixins.js
const flexCenter = css`...`
export default { flexCenter };

// usage inside styled components.
${mixins.flexCenter}