• [X ] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Currently - in order to use flexbox to style the elements inside a Sider, you have to do this:

      <Sider style={{ background: "white" }}>
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-evenly", height: "100%" }}>
          <SourcePicker/>
          <TimeSelector setTimeRange={this.setTimeRange} />
        </div>
      </Sider>

This is bad because it requires adding an unecessary div just to use flexbox. The reason this happens currently is because a Sider is composed of 2 nested divs, so adding display: flex to the style prop of the Sider only affects the outer div, thus making flexbox unusable.

This is a problem because it forces developers to add unnecessary divs to their site. This

A] Might make the webpage more inaccessible since excessive use of divs, etc. harms screen readers and is non-semantic HTML

B] bad for performance / webpage size. Also causes inelegant/bloated code.

What does the proposed API look like?

Add a bodyStyle or childrenStyle prop, or something similar, that allows developers to style the inner div of the sider, thus letting them use flexbox without creating an extra div. Or, just remove the inner div inside the sider.