소재 - ui @ 다음으로 전체 화면 서랍

Question

@next 버전의 첫 번째 material-ui 버전 전체 화면 서랍 양식을 다시 만드는 방법은 무엇입니까?

나는이

<Drawer width={'100%'} open={this.props.eventsDrawer} className="events-drawer"> 
... 
</Drawer> 

을 할 수 있도록 사용하지만 지금은이 작업을 수행 할 수있는 방법을 표시되지 않는 이유는 무엇입니까? 이것을 달성하기 위해 CSS를 사용해야할까요? 그렇다면 어떤 요소를 적용할까요?

Answer 1

Responsive Drawer demo은 클래스를 사용하여 서랍의 크기를 조정하는 방법을 보여줍니다.

import React from 'react'; 
import PropTypes from 'prop-types'; 
import { withStyles } from 'material-ui/styles'; 
import Drawer from 'material-ui/Drawer'; 

const styles = { 
    drawerPaper: { 
    width: '100%', 
    }, 
}; 

const ResponsiveDrawer = ({ classes }) => (
    <div> 
    <Drawer 
     type="temporary" 
     classes={{ 
     paper: classes.drawerPaper, 
     }} 
    > 
     ... 
    </Drawer> 
    </div> 
); 

export default withStyles(styles)(ResponsiveDrawer); 

Drawer이 너무 크기를 변경하려면 해당 컨테이너를 채우기 위해 플렉스 것입니다, 당신은 Drawer 포장 및 랩퍼 클래스를 적용 : 여기에 옷을 벗었 그 데모 버전입니다. 이 데모에서는

, 우리는 JSS를 사용하여 styles 객체의 클래스를 정의하고 클래스 객체로 ResponsiveDrawer 구성 요소를 제공하기 위해 withStyles 고차원 구성 요소를 사용합니다.

withStyles은 테마 변수를 참조해야 할 경우 수행 할 수있는 팩토리 기능도 허용합니다. 이것은이 데모의 전체 버전에서 수행됩니다.

이 접근법은 Overriding with classes에 자세히 설명되어 있습니다.