英文:
Mui theme breakpoints not working as expected
问题
我已经为我的基于 MUI React 的应用程序设置了断点，如下所示：
export const lighttheme = createTheme({
palette: palette,
typography: typography,
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 900,
lg: 1200,
xl: 1536,
xxl: 2160,
},
},
components: {
MuiTooltip: LightMuiTooltip,
MuiDrawer: {
styleOverrides: {
root: {
display: "flex",
minHeight: "100vh",
zIndex: 1,
overflow: "hidden",
},
},
},
},
});
在我的组件中，我这样说：
const InnerNavBox = styled(Box)(() => ({
justifyContent: "space-between",
alignItems: "center",
display: "flex",
flexDirection: "column",
gap: theme.breakpoints.between("lg", "xxl") ? "4rem" : "2rem", // "2rem",
}));
我正在检查屏幕尺寸，屏幕 1 - 1194x834 和屏幕 2 - 1728x1117。我期望屏幕 1 的间距为 2rem，屏幕 2 的间距为 4rem。然而，现在两个屏幕都变成了 4rem。我不确定我做错了什么。有人可以帮忙吗？
英文:
I have set breakpoints for my mui react based app as follows
export const lighttheme = createTheme({
palette: palette,
typography: typography,
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 900,
lg: 1200,
xl: 1536,
xxl: 2160,
},
},
components: {
MuiTooltip: LightMuiTooltip,
MuiDrawer: {
styleOverrides: {
root: {
display: "flex",
minHeight: "100vh",
zIndex: 1,
overflow: "hidden",
},
},
},
},
});
In my component I am saying
const InnerNavBox = styled(Box)(() => ({
justifyContent: "space-between",
alignItems: "center",
display: "flex",
flexDirection: "column",
gap: theme.breakpoints.between("lg", "xxl") ? "4rem" : "2rem", //"2rem",
}));
I am checking on screen sizes screen 1 - 1194x834 and screen 2 - 1728x1117. I am expecting the gap to be 2rem for screen 1 and 4rem for screen 2. However, both screens have become 4rem now. I am not sure what I am doing wrong. Can anyone help please.
答案1
得分: 2
theme.breakpoints.between(start, end) 返回一个媒体查询的**字符串**，而不是一个布尔值。你在示例中的使用方式会始终评估为true（因为between()的返回值是一个非空的字符串） - 因此你的三元操作符将始终返回'4rem'。
你尝试使用的正确方式应该是：
const InnerNavBox = styled(Box)(({ theme }) => ({
justifyContent: "space-between",
alignItems: "center",
display: "flex",
flexDirection: "column",
gap: "2rem", // 定义默认行为
[theme.breakpoints.between("lg", "xxl")]: { // 在这些断点范围内（包括）重写默认行为
gap: "4rem",
}
}));
但我想，在这个特定情况下（假设你不会有比xxl更大的断点），你真正想要的是theme.breakpoints.up(key)：
const InnerNavBox = styled(Box)(({ theme }) => ({
justifyContent: "space-between",
alignItems: "center",
display: "flex",
flexDirection: "column",
gap: "2rem", // 定义默认行为
[theme.breakpoints.up("lg")]: { // 注意`up()`而不是`between()` - 如果在定义的断点或更高的断点范围内，重写默认行为
gap: "4rem"
}
}));
工作的 CodeSandbox: https://codesandbox.io/s/theme-breakpoints-pvyhjd?file=/demo.tsx
英文:
theme.breakpoints.between(start, end) returns a media query string, not a boolean. The way you're using it in your example will always evaluate to true (because the return value of between() is a non-empty string) -- so your ternary will always return '4rem'.
The correct usage for the way you're trying to use it would be:
const InnerNavBox = styled(Box)(({ theme }) => ({
justifyContent: "space-between",
alignItems: "center",
display: "flex",
flexDirection: "column",
gap: "2rem", // define a default behavior
[theme.breakpoints.between("lg", "xxl")]: { // override the default behavior if within these breakpoints (inclusive)
gap: "4rem",
}
}));
But I imagine, for this particular case (assuming you won't have any larger breakpoint than xxl), what you really want is theme.breakpoints.up(key):
const InnerNavBox = styled(Box)(({ theme }) => ({
justifyContent: "space-between",
alignItems: "center",
display: "flex",
flexDirection: "column",
gap: "2rem", // define a default behavior
[theme.breakpoints.up("lg")]: { // Notice `up()`, not `between()` -- override the default behavior if within the defined breakpoint or higher
gap: "4rem"
}
}));
Working CodeSandbox: https://codesandbox.io/s/theme-breakpoints-pvyhjd?file=/demo.tsx
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论