Есть ли способ объявить стилизованный компонент с различными основными элементами?

Question

Мне нужно создать 2 одинаковых стилизованных компонента, которые будут иметь общий стиль, но использовать другой элемент HTML.

Есть способ сделать во время выполнения свойство "as" (), но у меня есть определенный экспорт, который мне нужно использовать по умолчанию, но мне нужно, чтобы он был в пути без использования, поэтому компонент в стиле Link быть "styled.a" и компонентом StyledLink, чтобы быть "styled.span", я пытался сделать что-то вроде:

export const StyledLink = styled.span(`
  color: ${props => props.theme.colors.mainLinkColor};;
  text-decoration: underline;

  &:hover {
    color: ${props => props.theme.colors.textAccent};
    text-decoration: underline;
  }
`);

export const Link = <StyledLink as={RRLink} />;

Это, очевидно, не работает ... Так есть ли способ, чтобы Ссылка имитировала стили StyledLink, но использовала тег "a" вместо "span"?

Answer 1

Просто импортируйте и используйте css из styled-components, например:

import React from "react";
import ReactDOM from "react-dom";
import styled, { css } from 'styled-components';

const sharedStyles = css`
  background-color: gold;
`;

const Div = styled.div`
  ${sharedStyles}

`;

const Button = styled.button`
  ${sharedStyles}
`;

const App = () => (
  <>
  <Div>Hello Div</Div>
  <Button>Hello Button</Button>
  </>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);