reactjs - 如何使用样式组件设置 'amp-img' 元素的样式？

Question

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

我想使用需要 amp-img 的 AMP HTML 设置图像样式标签，不是 img .

这是我想做的事情:

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

谢谢!

Answer 1

你可以引用这个AMP HTML Components文档。

Styling and theming of AMP-provided components is all done via CSS. See the AMP Spec for more detail.

AMP 元素可以使用最常见的 CSS 属性通过类或元素选择器进行样式设置。使用单个 <style amp-custom> 向 AMP 页面添加任何样式文件头部的标签。例如:

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

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

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

amp-img {
  background-color: grey;
}

希望这可以帮助!