Change CSS of styled-components with react in Class components

Issue

I must change the width of a sidebar using styled-components library in React project.

Here is the code in the Class Component :

let SidebarStyled = styled.div`
  width: 200px;
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100vh;
  background-color: #0c1635;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .showFlexInMobile {
    display: none !important;
  }
  p {
    color: white;
    font-size: 0.85rem;
    text-align: center;
  }
  @media (max-width: 1024px) {
    width: 70px;
    .hideInMobile {
      display: none !important;
    }
    .showFlexInMobile {
      display: flex !important;
    }
    > .link-logo {
      margin-top: 8px;
      > img {
        width: 50px;
      }
    }
  }
`

const hideSidebar = () => {
  // my code
}


class Sidebar extends Component<ISidebar> {
  render() {
    return (
      <SidebarStyled>
        <SidebarHeaderStyled style={{ position: 'relative' }}>
          <button onClick={hideSidebar} className="buttonSideBar">
            -
          </button>
   [...]
`;

On click on the button at the end, I would like a hideSidebar function to actually change the width from 200px to 70px. I usually use hooks to do this, but my client has only Class components.

Anyone can help me on this ? Thank you very much

Solution

add props to your styled tags

https://styled-components.com/docs/basics#passed-props in your case it would look something like

const Somestyled= styled.input`
  padding: 0.5em;
  margin: 0.5em;
  width: ${props => props.somethinghere};
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

and use it looks

<Somestyled somethinghere={yourVariableHere} />

Answered By - anaval