Почему значение flex не обновляется в компоненте styled?

Question

У меня есть боковая панель и основной контент. Основной контент занимает большую часть экрана, в то время как боковая панель должна занимать лишь небольшую часть. У меня есть родительский контейнер, который является flexbox. Оба дочерних элемента (боковая панель и основное содержимое) являются элементами div.

Боковая панель по умолчанию закрыта

Проблема: переключение на боковую панель не расширяет боковую панель, как ожидалось

Вещи, которые я проверял:

1. Значения Flex в боковой панели css обновляются корректно
2. События боковой панели запускаются и корректно обновляется хук isOpen

// main.ts
import styled from 'styled-components';

export const Content = styled.div`
    flex: 4;
    margin-top: 1em;
    margin-bottom: 2em;
    height: 100vh;
`;

export const Container = styled.div`
    display: flex;
`;

// sidebar/styles.ts

import styled from 'styled-components';

interface RootProps {
    isOpen: boolean;
}

export const Root = styled.div<RootProps>`
    padding: 1em;
    background-color: ${DARK};
    flex: ${({ isOpen }: RootProps) => (isOpen ? 1 : 0)};
`;

// sidebar/index.tsx
export const Sidebar: React.FC = () => {
    const dispatch = useDispatch();
    const isOpen = useSidebar();

    const handleOpen = () => dispatch(toggleSidebar());

    return (
        <Root isOpen={isOpen}>
            <Button onClick={handleOpen}>
                CLICK ME
            </Button>
        </Root>
    );
};

// Usage
// Sidebar styles mirror what's in the sidebar styled component file

<Container>
   <Sidebar />
   <Content />
</Container>

Ожидаемый результат заключается в том, что боковая панель расширяется и сворачивается при переключении кнопки. Сообщения об ошибках не отображаются, и значения flex на боковой панели корректно обновляются.

JSFiddle только с HTML / CSS, но по сути желаемый эффект: https://jsfiddle.net/5dLk9ex3/3/

Answer 1

Я не уверен, почему, но установка основного содержимого div на min-width: 0 решила проблему. См. Это для более подробной информации: Сгибание элементов не уменьшается при уменьшении окна

Answer 2

Проблема с вашим кодом находится где-то в области действия редуктора (ваш вопрос не завершен), ваш Sidebar не перерисовывается после отправки действия.

Рабочий пример:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';

const Container = styled.div`
  display: flex;
`;

const First = styled.div`
  flex: ${({ isOpen }) => (isOpen ? 1 : 0)};
  background-color: red;
  height: 20px;
`;

const Second = styled.div`
  flex: 4;
  background-color: green;
  height: 20px;
`;

const DEFAULT_INITIAL = false;

const App = () => {
  const [isOpen, setIsOpen] = useState(DEFAULT_INITIAL);

  const onClick = () => {
    console.log('Toggle Sidebar');
    setIsOpen(p => !p);
  };

  return (
    <>
      <Container>
        <First isOpen={isOpen}>FIRST</First>
        <Second>SECOND</Second>
      </Container>
      <button onClick={onClick}>OpenSider</button>
    </>
  );
};

Пожалуйста, обратитесь к первому комментарию этого ответа