Как я могу изменить ширину и высоту реакции-флип-страницы, используя css для медиа-запросов? - PullRequest
Новая
       5

Как я могу изменить ширину и высоту реакции-флип-страницы, используя css для медиа-запросов?

0 голосов
/ 11 января 2020

Я использую пакет response-flip-page npm для анимации книги в своем веб-приложении. Однако этот компонент поставляется с некоторыми доступными опорами для установки размера, цвета и т. Д. c страницы, но проблема в том, что я не знаю, как изменить / изменить ширину при настройке медиазапросов. 

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

Поэтому я хочу изменить ширину и высоту, например, когда компонент просматривается на экране мобильного телефона. Я пытался присвоить ему className, но ширина и высота остались прежними (500 пикселей)

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 11 января 2020

Я нашел способ изменить его, добавив значение состояния в качестве ширины компонента, а затем на основе условия 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>
...