Why is the flex-value not updating in the styled-component?

Question

I have a sidebar and some main content. The main content takes up the majority of the screen whilst the sidebar should only take a small portion. I've got a parent container that is a flexbox. The two children (sidebar and main content) are both div elements.

The sidebar is closed by default

The Issue: Toggling the sidebar does not expand the sidebar as expected

Things I've Checked:

Flex values in the sidebar css are being updated correctly
Sidebar events are being fired and the isOpen hook is being updated correctly

// 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>

Expected outcome is that the sidebar expands and collapses when toggling the button. No error messages are displayed and the sidebar flex values are being updated correctly.

JSFiddle with just HTML / CSS but essentially the desired effect: https://jsfiddle.net/5dLk9ex3/3/

What are you trying to achieve in `flex: 0`? Also, better-asking CSS question with providing a producible sandbox, like `codesandbox` and `codepen` — Dennis Vash, Sep 30 '19 at 19:56
I only want the necessary width to be display in the sidebar with `flex: 0`, with `flex: 1` I want to compete with main content for screen space, specifically 1 / 5th of it — willredington315, Sep 30 '19 at 19:57
Well you see by yourself changing `flex 0` to `flex 1` not affects — Dennis Vash, Sep 30 '19 at 20:00
Did you try the fiddle? Chaning from 0 to 1 has the desired effect — willredington315, Sep 30 '19 at 20:02

Dennis Vash · Answer 1 · 2019-10-01T09:06:13.030

The problem with your code is somewhere in the reducer scope (your question is incomplete), your Sidebar doesn't rerender after you dispatching an action.

Working example:

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

Please refer to the first comment of this answer

Your question missing the reducer logic and `toggleSidebar`, `useSidebar` implementations, your "bug" is within the reducer logic. Please reproduce the problem in the reducer scope and **ask another question**. Refer to [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) — Dennis Vash, Oct 01 '19 at 09:03

score 0 · Accepted Answer · answered Oct 01 '19 at 13:31

0

I'm unsure as to why but setting the main content div to min-width: 0 resolved the issue. See this for more: Flex items not shrinking when window gets smaller

answered Oct 01 '19 at 13:31

willredington315

199
1
13

Why is the flex-value not updating in the styled-component?

2 Answers2