为什么样式化组件中的flex值没有更新？

Question

我有一个侧边栏和一些主要内容。主要内容占据了屏幕的大部分，而侧边栏应该只占一小部分。我有一个父容器，它是一个flexbox。两个子元素（侧边栏和主内容）都是div元素。

侧边栏默认关闭

问题是：切换侧栏不会像预期的那样扩展侧栏

我检查过的东西：

1. 侧栏css中的Flex值正在正确更新

// 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只有超文本标记语言/CSS，但基本上是所需的效果：https://jsfiddle.net/5dLk9ex3/3/

Answer 1

我不确定为什么，但将主内容div设置为minwidth:0解决了这个问题。更多信息请参见：当窗口变小时，Flex项目不会收缩

Answer 2

代码的问题在reducer范围内的某个地方（您的问题不完整），您的侧边栏在发送操作后不会重新加载。

工作示例：

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>
    </>
  );
};

请参阅此答案的第一条评论