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

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

是的，使用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}
`;

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

// mixins.js
const flexCenter = css`...`
export default { flexCenter };
// usage inside styled components.
${mixins.flexCenter}