Question

所以我的断点似乎没有对齐。 “sm”屏幕似乎设置为 1055 像素。

Theme.js

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
});

export default theme;

导航器.js

const classes = useStyles();
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.down('sm'));

Answer 1

这是工作示例

<span class="mid-savings-text">

确保使用 import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles"; const theme = createMuiTheme({ breakpoints: { values: { xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920 } } });

包装您的应用

ThemeProvider

在组件中

<ThemeProvider theme={theme}>
   <App />
</ThemeProvider>

如果您切换到移动/桌面/桌面分辨率，import { useTheme } from "@material-ui/core/styles"; import useMediaQuery from "@material-ui/core/useMediaQuery"; export default function App() { const theme = useTheme(); const matches = useMediaQuery(theme.breakpoints.down("sm")); return ( <div className="App"> <span>{`theme.breakpoints.down('sm') matches: ${matches}`}</span> <div>value: {theme.breakpoints.values.sm}</div> </div> ); } 返回 true/false。

沙盒链接：https://codesandbox.io/s/media-query-hook-1jmj6?file=/src/index.js

断点在设置的断点处不起作用

1 个答案: