样式组件 - 具有相同样式的两个不同元素

Question

我有一个 Button 组件（在 React 中），它可以是 button 或 a 元素，具体取决于是否将 href 属性传递给组件。类似于以下内容：

const Button = ({ children, href, onClick }) => {
    if(href) {
        return <a href={href} onClick={onClick}>{children}</a>;
    }

    return <button type="button" onClick={onClick}>{children}</button>;
};

我之前使用 Sass 来设置这些组件的样式，但现在我尝试转移到 styled-components。但是，我遇到了一个问题，这两个元素需要相同的样式，但 styled-components 的语法要求我创建分隔变量 - styled.button 和 styled.a，每个变量都有重复的样式。

我想知道是否有一种方法可以动态更改styled-components 中使用的元素，也许基于道具，就像可以更改单个 CSS 属性一样？我尝试过类似的东西：

const StyledButton = styled((props) => props.href ? 'a' : 'button')`
    ...
`;

但到目前为止还没有运气。任何建议将不胜感激。

Answer 1

我尝试了 Joe Lloyd 的回答，但没有成功，因为函数 styled.xxx() 采用 templateStringsArray 类型的一个参数而不是 template String：

const buttonStyles = [
`
color: red;
...
`
]

const StyledA = styled.a(buttonStyles);
const StyledButton = styled.button(buttonStyles);

Answer 2

创建可以重复使用的通用样式

您可以提取样式并将其作为字符串参数传递给样式化组件。

const buttonStyles = `
color: red;
...
`

const StyledA = styled.a(buttonStyles);
const StyledButton = styled.button(buttonStyles);

如果您需要一些例外情况

import styled, { css } from ‘styled-components’;

const baseInputStyles = css`
  padding: 0.5em;
`;

const StyledA = styled.a`
  ${baseInputStyles}
`;

const StyledButton = styled.button`
  ${baseInputStyles}
  /* make changes as needed*/
`;