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

时间:2017-09-07 10:17:25

标签: reactjs material-ui

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

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

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

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

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

2 个答案:

答案 0 :(得分: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相结合。 我以前的代码有几个错误。

  1. 不是minWidth min-width
  2. 不是width: '90%'width: 90%
  3.  // 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' : '' )}`} />
            )
        }
    

答案 1 :(得分:0)

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

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