Стилизованные компоненты - два разных элемента с одинаковыми стилями

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

Создание обобщенных c стилей, которые вы можете использовать повторно

Вы можете извлекать и передавать стили в виде строковых аргументов в стилируемый компонент.

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*/
`;