css - 如何使用 css 修改 react-flip-page 的宽度和高度以进行媒体查询？

Question

我正在使用 react-flip-page npm 包在我的网络应用程序中为一本书制作动画。然而，该组件带有一些可用的 Prop 来设置页面的大小、颜色等，但问题是我不知道如何在设置我的媒体查询时更改/修改宽度。

<FlipPage
      uncutPages="true"
      showSwipeHint="true"
      pageBackground="rgb(230, 216, 95)"
      className="flipPageComponent"
      width="500"
      height="500"
      orientation="horizontal"
    >
      {pagesList}
</FlipPage> 

所以我想在例如在移动屏幕上查看组件时更改宽度和高度。我试过给它一个类名，但宽度和高度保持不变 (500px)

感谢任何帮助。

Answer 1

我找到了一种方法来更改它，方法是添加一个状态值作为组件的宽度，然后根据 window.innerWidth 条件将宽度设置为我想要的数字:

const [flipPageWidth, setFlipPageWidth] = useState("");

    useEffect(() => {
    if (window.innerWidth > 1450) {
                    setFlipPageWidth("500");
                } else {
                    setFlipPageWidth("200");
                }
    }, []);

    <FlipPage
       uncutPages="true"
       showSwipeHint="true"
       pageBackground="rgb(230, 216, 95)"
       className="flipPageComponent"
       width={flipPageWidth}
       height="500"
       orientation="horizontal"
     >
       {pagesList}
    </FlipPage>