styled-components: расширить стили и изменить тип элемента

Question

Представьте, что у меня есть следующие стили:

color: black;
border: 1px solid white;

и я хочу применить их к двум элементам разных типов:

const SomeImg = styled.img`
  margin: 2em;
`;

const SomeDiv = styled.div`
  margin: 3em;
`;

Как сделать так, чтобы оба элемента расширяли эти стили?

---

Достаточно легко, если они оба были <div> или <img>. Я мог бы сделать:

const ExtendMe = styled.div`
  color: black;
  border: 1px solid white;
`;

const SomeDiv = styled(ExtendMe)`
  margin: 2em;
`;

const OtherDiv = styled(ExtendMe)`
  margin: 3em;
`;

Answer 1

Вы можете использовать prop "as" из styled-components, который изменит html-тег вашего компонента: https://www.styled -components.com / документы / апи #, как-полиморфного-проп

Ниже приведен пример того, что вы хотите:

const ExtendMe = styled.div`
  color: black;
  border: 1px solid white;
`;

const SomeImg = styled(ExtendMe).attrs({
  as: "img"
})`
  margin: 2em;
`;


const SomeDiv = styled(ExtendMe)`
  margin: 3em;
`;

Вы можете видеть на: https://codesandbox.io/embed/mj3j1xp6pj?fontsize=14