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

您可以从样式化组件中使用道具“ as”，这些组件将更改组件的html标签： https://www.styled-components.com/docs/api#as-polymorphic-prop

下面是您想要的示例：

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

上看到

样式化的组件：扩展样式并更改元素类型

1 个答案: