Question

我正在与Gatsby一起使用样式组件。我使用样式化组件来设置Gatsby为主页提供的Link组件的样式。

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};
  }
`

但是，我意识到我还需要使用完全相同的样式来设置纯HTML <a />标签的样式。我想知道是否有一种方法可以使上面的样式组件适应<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

是的，请使用css API，它允许您构造可重复使用的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}

使用样式化的组件在组件/元素之间共享样式

1 个答案: