Question

如何使用样式组件设置自定义标签的样式？

我想使用AMP HTML设置图片样式，该标记需要amp-img标记，而不是img。

以下是我想做的事情：

const Image = styled.('amp-img')`
filter: blur(2px);`

THX！

Answer 1

您可以参考此AMP HTML Components文档。

AMP提供的组件的样式和主题都是通过CSS完成的。有关详细信息，请参阅AMP Spec。

AMP元素可以使用最常见的CSS属性使用类或元素选择器进行样式设置。使用文档头部中的单个<style amp-custom>标记将任何样式添加到AMP页面。例如：

<style amp-custom>
  amp-img {
    border: 5px solid black;
  }

  amp-img.grey-placeholder {
    background-color: grey;
  }
</style>

同样来自page，它声明可以通过CSS属性直接设置amp-img样式。例如，可以通过以下方式设置灰色背景占位符：

amp-img {
  background-color: grey;
}

希望这有帮助！

Answer 2

您不能直接通过样式化的组件来对amp标签进行样式化。取而代之的是，您可以使用div对其进行包装并为其设置样式。

const Image = styled.div
filter: blur(2px);

<Image><amp-img /></Image>