有人有使用樣式化組件包的css容器查詢的例子嗎？我甚至不能讓查詢中的css顯示出來(lái)。

我嘗試了一些事情。下面是我認(rèn)為最有效的方法。我根本看不到容器查詢中應(yīng)用的樣式。我仔細(xì)檢查了& quot圖像包裝器& quot組件具有容器查詢中指示的正確類。

將容器查詢放在& quot權(quán)利內(nèi)容& quot組件，帶或不帶& amp(引用圖像包裝父對(duì)象)。

<RightContent>
  <ImageWrapper className="imageWrapper">
   {s3_image && (
    <Image
     style={{ height: '100%', width: '100%' }}
     imgStyle={{ height: '100%', width: '100%' }}
     src={s3_image?.filename}
     alt={s3_image?.alt}
     />
    )}
   </ImageWrapper>
</RightContent>
.
.
.
const ImageWrapper = styled.div`
  aspect-ratio: 1/1;
  max-width: 100%;
`;

const RightContent = styled.div`
  container: rightContent inline-size;

  @container rightContent (min-width: 633px) {
    .imageWrapper {
      aspect-ratio: 3/2;
      border: 5px solid red;
    }
  }
`;

我通過(guò)在組件中注入一個(gè)樣式標(biāo)簽來(lái)解決這個(gè)問(wèn)題，在這個(gè)組件中，我覆蓋了樣式化組件中聲明的內(nèi)容:

<style type="text/css">
   {`
       #widget-${widgetId} {
          container-type: inline-size;
          container-name: widget;
        }
        @container widget (max-width: 480px) {
          .widget-content {
             grid-template-columns: 1fr !important;
           }
           .widget-form {
             grid-template-columns: 1fr !important;
           }
         }
   `}
 </style>