Search code examples
reactjsantd

How to make ant-design Drawer component width responsive

I'm using ant design drawer component and style component. It seems the I can set a fixed width with width props. ButI can't make it responsive.

<Drawer
   width={500}
   placement="right"
   closable={true}
   onClose={this.props.handleDrawer}
   visible={this.props.visible}
>
Solution

  • An actual solution would be to use an expression.

    Like const isMobile = true //do a match on something there

    And use that expression to render a conditional percent since attribute are just javascript you could do something like.

    width={isMobile ? "80%" : "40%"}