bố cục material-ui, điểm ngắt trên các thùng chứa

Question

Tôi đang bắt đầu một dự án mới và học React.

Tôi có kinh nghiệm trước đây với trình khởi động twitter, nhưng đã chọn truy cập material-ui.

Tôi cũng đã chọn để đi cho vật liệu-ui @ tiếp theo vì nó bao gồm một hệ thống Layout (https://material-ui-1dab0.firebaseapp.com/layout/responsive-ui)

Cho đến nay tôi đã sử dụng container và item của Layout với thành công để sắp xếp lại các mục trong một container theo khác nhau điểm ngắt.

Nhưng tôi cũng muốn có thể làm cho vùng chứa đáp ứng, có nghĩa là đưa ra các giá trị khác nhau để 'căn chỉnh', 'hướng' và 'biện minh, theo cùng các điểm ngắt.

<Layout 
    container 
> 
<Layout item md={2} sm={12}> 
    <Layout 
     container 
     align={"stretch"} 
     direction={"row"} 
     justify={"center"} 
    // more Layout items here 
    </Layout> 
</Layout> 
<Layout item md={10} sm={12}> 
    <Layout 
     container 
     direction={"column"} 
     justify={"space-around"} 
     align={"flex-start"} 
    > 
    // more Layout items here 
    </Layout> 
</Layout> 
</Layout> 

Trong ví dụ này, các mục Layout sẽ thay đổi kích thước đúng theo breakpoint md và sm, nhưng không có quy định như vậy cho container (ví dụ tôi muốn align để được 'flex-start' khi breakpoint

vì vậy câu hỏi của tôi là: 'điểm ngắt' (xs, sm, md, lg, xl) có thể được sử dụng để sửa đổi cách các mục được phân phối trên một dòng Vì vậy, có thể sử dụng các điểm ngắt tương tự để sửa đổi cách các vùng chứa phân phối các mặt hàng của họ không?

Cảm ơn rất nhiều

Answer 1

Bạn có thể xử lý này sử dụng các truy vấn phương tiện truyền thông qua JSS-theme-lò phản ứng:

const styleSheet = createStyleSheet('test', theme => ({ 
    gridItem: { 
    alignItems: 'center', 
    }, 
    [theme.breakpoints.up('md')]: { 
    gridItem: { 
     alignItems: 'flex-start', 
    }, 
    }, 
})); 

const testComponent = (props, { styleManager }) => { 
    const classes = styleManager.render(styleSheet); 

    return (
    <Grid container> 
     <Grid item md={2} sm={12} className={classes.gridItem}> 
     <div>Hi, I'm in an item.</div> 
     </Grid> 
     <Grid item md={10} sm={12} className={classes.gridItem}> 
     <div>Yeah, me too.</div> 
     </Grid> 
    </Grid> 
); 
}; 

Ngoài ra, bạn có thể xử lý này bằng cách sử dụng withWidth HOC (mà trang trí các thành phần với một tài sản width):

import withWidth, { isWidthUp } from 'material-ui/utils/withWidth'; 

const styleSheet = createStyleSheet('AppDrawer', theme => ({ 
    gridItemSmall: { 
    alignItems: 'center', 
    }, 
    gridItemMedium: { 
    alignItems: 'flex-start', 
    }, 
})); 

const testComponent = ({ width }, { styleManager }) => { 
    const classes = styleManager.render(styleSheet); 
    const itemClass = isWidthUp('md', width) ? classes.gridItemMedium : classes.gridItemSmall; 
    return (
    <Grid container> 
     <Grid item md={2} sm={12} className={itemClass}> 
     <div>Hi, I'm in an item.</div> 
     </Grid> 
     <Grid item md={10} sm={12} className={itemClass}> 
     <div>Yeah, me too.</div> 
     </Grid> 
    </Grid> 
); 
}; 

export default withWidth()(testComponent);