Reactjs 物料ui组件中抽屉的媒体查询

我想在web上设置50%屏幕宽度的组件，在移动设备上设置90%屏幕宽度的组件，但媒体查询似乎对材质ui组件不起作用

有人能帮我吗

PS：到目前为止我已经试过了，但没有效果

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

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

---

我建议你试试这样的东西

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

//DrawerComponent.js

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

//...

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

更新2

以前的版本使抽屉在其大小介于介质查询之间时始终保持打开状态。转换导致的问题：转换值计算错误。 我用下面的代码修复了这个问题。希望能有帮助

 // 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' : '' )}`} />
        )
    }

---

使用支架对可以解决您的问题：

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

---

哦，你是在建议这样做，对不起，伙计，但我也已经这样做了，而且再次不工作，如果你有任何相同的解决方法，你能分享plunker上的代码吗？不用担心，伙计，我使用了无错误代码，工作但没有根据需要提供所需的输出，当你添加宽度时，抽屉默认情况下会选择web不知道为什么，我很抱歉。我无法理解这个问题。

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