使用 twin.macro 将外部样式应用于 Gatsby StaticImage

Question

我正在使用来自 gatsby-plugin-image 的 StaticImage 和 twin.macro 进行 CSS 样式设置并遵循本指南：https://github.com/ben-rogerson/twin.examples/tree/master/gatsby-styled-components#getting-started

...
import tw, { css, styled, theme } from 'twin.macro'
import { StaticImage } from 'gatsby-plugin-image'
...

    <StaticImage
      imgStyle={tw`rounded-lg shadow-2xl`}
      style={tw`p-4`}
      src="../images/image.jpeg"
      width={300}
      quality={95}
      formats={['AUTO', 'WEBP', 'AVIF']}
      alt="Description"
    />

使用 'imgStyle' 设置内部 img 元素的样式适用于 twin.macro。然而，对 StaticImage 的样式属性应用相同的技术会导致以下错误：

不应在 style={...} 属性中添加样式

如何将 twin.macro 应用于 StaticImage 的样式属性？

Answer 1

According to the Gatsby Image plugin docs:

The images are loaded and processed at build time, so there are restrictions on how you pass props to the component. The values need to be statically-analyzed at build time, which means you can’t pass them as props from outside the component, or use the results of function calls, for example. You can either use static values, or variables within the component’s local scope.

所以代码应该是这样的：

// Also OK
// A variable in the same file is fine.
const width = 300;
const height = 300;
const imgStyle= tw`rounded-lg shadow-2xl`;
export function Dino() {
  // This works because the value can be statically-analyzed
  const height = (width * 16) / 9
  return <StaticImage 
      src="../images/image.jpeg" 
      width={width} 
      height={height} 
      style={imgStyle}
  />
}

使用 twin.macro 将外部样式应用于 Gatsby StaticImage

Apply outer style to Gatsby StaticImage using twin.macro

css

reactjs

gatsby