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

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

侧边栏默认关闭

问题：切换侧栏不会按预期扩展侧栏

我检查过的东西：

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

正在激发侧栏事件，并且正在正确更新isOpen挂钩

//main.ts
从“样式化组件”导入样式化；
export const Content=styled.div`
弹性：4；
边缘顶部：1米；
边缘底部：2米；
高度：100vh；
`;
export const Container=styled.div`
显示器：flex；
`;
//侧边栏/styles.ts
从“样式化组件”导入样式化；
接口RootProps{
等参：布尔；
}
export const Root=styled.div`
填充：1em；
背景色：${DARK}；
flex:${（{isOpen}:RootProps）=>（isOpen？1:0）}；
`;

//侧栏/index.tsx
导出常量边栏：React.FC=（）=>{
const dispatch=usedpatch（）；
常量isOpen=useSidebar（）；
const handleOpen=（）=>dispatch（toggleSidebar（））；
返回(
点击我
);
};

//用法
//边栏样式镜像边栏样式组件文件中的内容

预期结果是侧边栏在切换按钮时会展开和折叠。不会显示任何错误消息，并且侧边栏弹性值正在正确更新

---

jshiddle只使用HTML/CSS，但本质上是想要的效果：

代码的问题在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>
    </>
  );
};

import React，{useState}来自“React”；
从“react dom”导入react dom；
从“样式化组件”导入样式化；
const Container=styled.div`
显示器：flex；
`;
const First=styled.div`
flex:${（{isOpen}）=>（isOpen？1:0）}；
背景色：红色；
高度：20px；
`;
const Second=styled.div`
弹性：4；
背景颜色：绿色；
高度：20px；
`;
const DEFAULT_INITIAL=false；
常量应用=（）=>{
const[isOpen，setIsOpen]=useState（默认值为初始值）；
const onClick=（）=>{
log（'Toggle Sidebar'）；
setIsOpen（p=>！p）；
};
返回(
第一
第二
露天矿
);
};

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

代码的问题在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>
    </>
  );
};

import React，{useState}来自“React”；
从“react dom”导入react dom；
从“样式化组件”导入样式化；
const Container=styled.div`
显示器：flex；
`;
const First=styled.div`
flex:${（{isOpen}）=>（isOpen？1:0）}；
背景色：红色；
高度：20px；
`;
const Second=styled.div`
弹性：4；
背景颜色：绿色；
高度：20px；
`;
const DEFAULT_INITIAL=false；
常量应用=（）=>{
const[isOpen，setIsOpen]=useState（默认值为初始值）；
const onClick=（）=>{
log（'Toggle Sidebar'）；
setIsOpen（p=>！p）；
};
返回(
第一
第二
露天矿
);
};

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

我不确定原因，但将主内容div设置为
最小宽度：0
解决了问题。有关更多信息，请参见此：
我不确定原因，但将主内容div设置为
最小宽度：0
解决了问题。更多信息请参见此：
在
flex:0
中，您想要实现什么？另外，最好通过提供一个可生产的沙盒来询问CSS问题，比如
codesandbox
和
codepen
我只想在侧边栏中显示必要的宽度，使用
flex:0
，使用
flex:1
我想与主要内容争夺屏幕空间，具体来说是五分之一。你可以看到自己将
flex 0
更改为
flex 1
不受影响。你试过小提琴了吗？从0更改为1具有所需的效果您确定您的组件在单击按钮时重新渲染吗？您在
flex:0
中试图实现什么？另外，最好通过提供一个可生产的沙盒来询问CSS问题，比如
codesandbox
和
codepen
我只想在侧边栏中显示必要的宽度，使用
flex:0
，使用
flex:1
我想与主要内容争夺屏幕空间，具体来说是五分之一。你可以看到自己将
flex 0
更改为
flex 1
不受影响。你试过小提琴了吗？从0更改为1具有所需的效果您确定您的组件在单击按钮时重新渲染吗？您的问题缺少reducer逻辑和
toggleSidebar
，
useSidebar
实现，您的“错误”在reducer逻辑中。请在减速器范围内重现该问题，并提出另一个问题。请参阅您的问题缺少reducer逻辑和
toggleSidebar
，
useSidebar
实现，您的“bug”在reducer逻辑中。请在减速器范围内重现该问题，并提出另一个问题。提到
// Usage
// Sidebar styles mirror what's in the sidebar styled component file

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

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