Układ materiałów, punkty przerwania na pojemnikach

Question

Zaczynam nowy projekt i uczę się React.

Mam wcześniejsze doświadczenie z twitter bootstrap, ale zdecydowałem się na materiał-ui.

Mam też zdecydowaliśmy się iść do materiału-ui @ następnego ponieważ zawiera system Layout (https://material-ui-1dab0.firebaseapp.com/layout/responsive-ui)

Dotychczas Użyłem pojemnik i element układu za sukcesem, aby zmienić elementy w pojemniku według różnych punkty przerwania.

Ale chciałbym również móc uczynić pojemnik responsywnym, czyli nadać różne wartości "wyrównania", "kierunku" i "uzasadnienia, zgodnie z tymi samymi punktami przerwania.

<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> 

W tym przykładzie, elementy układu zmieni rozmiar poprawnie według md punkty przerwania i SM, ale nie ma takich zasad pojemników (na przykład chciałbym align być „flex-start”, gdy punkt przerwania jest md, i "centrum", gdy punkt przerwania jest sm.

więc moje pytanie brzmi: "punkty przerwania" (xs, sm, md, lg, xl) mogą być używane do modyfikowania sposobu dystrybucji towarów w linii Czy możliwe jest użycie tych samych punktów przerwania, aby zmodyfikować sposób dystrybucji kontenerów przez ich produkty?

Bardzo dziękuję

Answer 1

może sobie z tym poradzić za pomocą zapytań multimedialnych za pośrednictwem JSS-theme-reaktorze:

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> 
); 
}; 

Alternatywnie, można sobie z tym poradzić stosując withWidth hoc (która zdobi komponent z właściwością szerokość):

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);