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

IT技术 javascript html css reactjs styled-components
2021-05-10 15:37:37

想象一下我有以下风格：

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;
`;
1个回答

您可以使用 styled-components 中的props“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

其它你可能感兴趣的问题
上一篇reacthighcharts表中的世界地图路径数据 下一篇支撑材料第一层粘附问题