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

Hey so the code had a few errors so I corrected the syntax and created this quick little codepen I'm not gonna explain everything I fixed but I will say watch your syntax. You can achieve this quite simply in the JSX and not have to use CSS at all!

You should convert your component over to a functional one since it's the convention these days. But regardless, you need to move the logic of hiding the component in the component itself. In the example I use React.useState() to toggle a boolean and hide the component. You can also use the classic class component state management to do this. I also put and example for showing it too. ;) Good luck

const Sidebar = () => {
  const [isShown, setIsShown] = React.useState(true);
  
  const hideSidebar = () => {
    setIsShown(false)
  }

  const showSidebar = () => {
    setIsShown(true)
  }
  return (
    <div>
    {
      isShown &&
      (<SidebarStyled>
      <button onClick={hideSidebar} className="buttonSideBar">
        -
      </button>
    </SidebarStyled>)}
      {!isShown && <button onClick={showSidebar} style={{ width: 50, height: 50, marginLeft: 300}}>
        show
      </button>}
    </div>
  );          
}

And in a class component:

class Sidebar extends React.Component {
 constructor(props) {
   super(props)
   
   this.state = { isShown: false };
 }
  
 hideSidebar() {
    this.setState({ isShown: false});
 }

  showSidebar() {
    this.setState({ isShown: true});
  }
  
  render() {
    const {
      isShown
    } = this.state;
    
    return (
    <div>
    {
      isShown &&
      (<SidebarStyled>
      <button onClick={() => this.hideSidebar()} className="buttonSideBar">
        -
      </button>
    </SidebarStyled>)}
      {!isShown && <button onClick={() => this.showSidebar()} style={{ width: 50, height: 50, marginLeft: 300}}>
        show
      </button>}
    </div>
  ); 
  }
           
}

You can try to do this

//your styled component

class Sidebar extends Component<ISidebar> {
  constructor( props ){
    super( props );
    this.state = { sidebarShow: true };
    this.hideSidebar = this.hideSidebar .bind(this);
  }

  hideSidebar = () => {
    // your code
    this.setState({
      ...this.state,
      sidebarShow: false
    })
  }
  render() {
    return (
      <SidebarStyled style={{left: `${this.state.sidebarShow ? '0px' : '-250px'}` }}>
        <SidebarHeaderStyled style={{ position: 'relative'}}>
          <button onClick={this.hideSidebar} className="buttonSideBar">
            -
          </button>
   [...]
`;

If you want to handle all styles in the styled component you can add a new attribute in a component

<SidebarStyled isShow={this.state.sidebarShow} >
....
</SidebarStyled>

And on component

let SidebarStyled = styled.div`
  width: 200px;
  position: fixed;
  left: ${props=>props.isShow ? '0px': '-250px'};

...

`

It will work for you.