J'ai un composant comme celui-ci
<Box px={3}>
<Content />
</Box>
En fait, lorsque ce code est rendu sur mobile, il n'y a pas de problème. Mais le paddingX reste égal à 24px (j'utilise 8 base - 8 * 3 = 24) lorsque mon application est rendue sur le bureau ou sur un écran plus grand.
P / s: J'ai essayé de modifier theme.spacing dans theme.js mais il semble que l'interface utilisateur matérielle ne nous permette pas de personnaliser l'espacement en fonction des points d'arrêt.
Ma question est donc la suivante: comment puis-je changer le système d'espacement en fonction de la largeur de l'écran?
4 Réponses :
Essayez React Device Detect, cela permet de déterminer sur quel appareil vous exécutez votre code et de créer des comportements spécifiques en fonction de celui-ci
ce n'est pas exactement ce dont j'ai besoin. Dans le thème, nous pouvons définir la valeur d'espacement (c'est-à-dire 8, 16, ...). Ce dont j'ai besoin, c'est d'utiliser theme.breakpoints pour contrôler cette valeur d'espacement.
On dirait que cela n'a pas encore été mis en œuvre .
Une solution de contournement suggérée par rnanania consiste à définir un espacement conditionnel en fonction de la détection des points d'arrêt:
import { useTheme } from '@material-ui/styles';
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('xs'), {
defaultMatches: true
});
<Grid container spacing={isMobile ? 0 : 4}>
</Grid>
Vous pouvez utiliser les hooks mediaQuery qui peuvent vous aider à récupérer la largeur, c'est-à-dire lg, md, sm et en fonction de cela, vous pouvez modifier conditionnellement l'espacement.
Vous ne pouvez pas modifier la valeur de base de l'espacement sur chaque point d'arrêt, mais vous pouvez modifier le multiplicateur d'espacement sur chaque point d'arrêt:
import { createMuiTheme } from '@material-ui/core/styles';
const theme = createMuiTheme(
{breakpoints: {
values: {
xs: 0,
sm: 600,
md: 900,
lg: 1200,
xl: 1600,
},
})
Prend en charge les accessoires de marge et de rembourrage
La personnalisation de la valeur du point d'arrêt peut être effectuée en implémentant createMuiTheme :
https://material-ui.com/customization/breakpoints/#custom-breakpoints
<Box px={{xs:1, sm:2, md:3}}>
<Content />
</Box>