Question

我想在网络上设置<Drawer>组件50%的宽度，在移动设备上设置90%，但媒体查询似乎不适用于material-ui组件。

任何人都可以帮我这个吗？

PS：到目前为止我已经尝试了这个但是没有工作

const drawerWidth = {
  width: '50%',
  '@media(minWidth: 768px)' : {
    width: '90%'
  }
}

<Drawer
    ....
    width={drawerWidth.width}
    ....
  >

Answer 1

我建议您尝试这样的事情。

// drawer.css
@media(minWidth: 780px) {
    .drawer {
        width: '90%';
    }
}

//DrawerComponent.js

import '/path/to/your/drawer.css';

//...

render() {
    return (<Drawer className="drawer" />)
}

PS： width道具可能会覆盖style，即使您没有设置它，因此您可能需要在CSS上使用!important。

更新1

使用containerClassName而不是className将其与!important相结合。我以前的代码有几个错误。

不是minWidth min-width
不是width: '90%'其width: 90%

 // drawer.css
    @media (min-width: 780px) {
        .drawer {
            width: 90% !important;
        }
    }



 //DrawerComponent.js

    import '/path/to/your/drawer.css';

    //...

    render() {
        return (<Drawer containerClassName="drawer" />)
    }

更新2

以前的版本使得抽屉在媒体查询大小之间始终保持打开状态。由transform: translate值计算错误导致的问题。我用下面的代码解决了这个问题。希望它有所帮助。

 // drawer.css
    @media (min-width: 780px) {
        .drawer {
            width: 90% !important; // material-ui uses vw so 90vw works too
            transform: translate(-100%, 0px) !important; // translate(-90vw, 0px)
        }
        .drawer.open {
            transform: translate(0, 0px) !important;
        }
    }



 //DrawerComponent.js

    import '/path/to/your/drawer.css';

    //...

    render() {
        return (
            <Drawer containerClassName={`drawer ${(this.state.open ? 'open' : '' )}`} />
        )
    }

Answer 2

使用大括号对可以解决您的问题：

const drawerWidth = {
  width: '50%',
  ['@media(minWidth: 768px)']: {
    width: '90%',
  },
};

在Material-ui组件中对Drawer进行媒体查询

2 个答案: