Как сделать муравейный дизайн ширины компонента ящика адаптивным

Question

Я использую компонент дизайна муравьев и компонент стиля.Кажется, я могу установить фиксированную ширину с шириной реквизита.Но я не могу заставить его реагировать.

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

Answer 1

Фактическим решением будет использование выражения.

Как const isMobile = true //do a match on something there

И использовать это выражение для отображения условного процента, так как атрибут - это просто javascript, вы можете сделать что-то вроде.

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

Answer 2

Вместо указания фиксированной ширины вы должны использовать className, чтобы назначить класс css, который затем необходимо настроить, чтобы он реагировал в соответствующем файле .less.Что-то вроде:

.my-drawer {
    width: 50%;
}
@media only screen and (max-width: @screen-md) {
    .my-drawer {
        width: 70%;
    }
}