Material-ui组件中的媒体查询

Question

我Material-ui在ReactJs项目中使用组件,由于某种原因,我需要在某些组件中进行自定义,以使其根据屏幕宽度进行响应.

我添加media query并将其作为样式属性传递给组件但不工作,任何想法？

我正在使用这样的代码

const drawerWidth = {
  width: '50%',
  '@media(minWidth: 780px)' : {
    width: '80%'
  }
}

<Drawer
  .....
  containerStyle = {drawerStyle}
 >
 </Drawer>

代码仅适用于网络,在移动设备上没有任何影响.甚至css代码没有申请我已经检查了dev.安慰.我正在使用material-ui版本0.18.7.

任何帮助,将不胜感激.

PS:根据要求,我需要根据屏幕大小使用CSS进行一些更改.

Answer 1

通过使用主题的断点属性,您可以直接在组件中使用与Grid和Hidden组件相同的断点.

API

theme.breakpoints.up(key) => media query

参数

key(String | Number):断点键(xs,sm等)或以像素为单位的屏幕宽度数.

返回 媒体查询:准备与JSS一起使用的媒体查询字符串.

例子

const styles = theme => ({
  root: {
    backgroundColor: 'blue',
    [theme.breakpoints.up('md')]: {
      backgroundColor: 'red',
    },
  },
});

有关更多信息,请查看此信息

Answer 2

在MUI v5中，可以在以下位置声明断点sx，其中键是断点名称，值是 CSS 值。

您可以在此处查看 MUI 默认断点。可以使用以下命令覆盖断点名称和值createTheme()：

const theme = createTheme({
  breakpoints: {
    values: {
      xxs: 0, // small phone
      xs: 300, // phone
      sm: 600, // tablets
      md: 900, // small laptop
      lg: 1200, // desktop
      xl: 1536 // large screens
    }
  }
});

return (
  <ThemeProvider theme={theme}>
    <Box
      sx={{
        // specify one value that is applied in all breakpoints
        color: 'white',
        // specify multiple values applied in specific breakpoints
        backgroundColor: {
          xxs: "red",
          xs: "orange",
          sm: "yellow",
          md: "green",
          lg: "blue",
          xl: "purple"
        }
      }}
    >
      Box 1
    </Box>
  </ThemeProvider>
);

在上面的示例中，xs: "orange"意味着Box如果屏幕宽度在xsrange内，则将颜色设置为橙色[300, 600)。

您还可以使用由最小断点到最大断点的值组成的数组来设置断点：

return (
  <ThemeProvider theme={theme}>
    <Box
      sx={{
        backgroundColor: [
          "red",
          "orange",
          // unset, screen width inside this breakpoint uses the last non-null value
          null,
          "green",
          "blue",
          "purple"
        ]
      }}
    >
      Box 2
    </Box>
  </ThemeProvider>
);

Answer 3

您在媒体查询中有拼写错误。您应该使用以下语法，它会按预期工作：

const drawerWidth = {
  width: '50%',
  '@media (min-width: 780px)' : {
    width: '80%'
  }
}

代替

const drawerWidth = {
  width: '50%',
  '@media(minWidth: 780px)' : {
    width: '80%'
  }
}

Answer 4

所以这是你可以做的(快速黑客).材料UI会抱怨你做了不必要的计算.

const styles = {
  drawerWidth: {
    width: '50%',
    ['@media (min-width:780px)']: { // eslint-disable-line no-useless-computed-key
      width: '80%'
    }
  }
}

Answer 5

对@Lipunov 的类似回答，基于@nbkhope 的评论

const styles = {
  drawerWidth: {
    width: '50%',
    [theme.breakpoints.up(780)]: {
      width: '80%'
    }
  }
}

Answer 6

我通过做这样的事情解决了这个问题:

const dropzoneStyles = 
window.screen.availWidth < 780 ? 
{ 'width': '150px', 'height': '150px', 'border': 'none', 'borderRadius': '50%' }
: { 'width': '200px', 'height': '200px', 'border': 'none', 'borderRadius': '50%' };

然后将其作为Material UI元素中的属性追加:

<Dropzone style={dropzoneStyles} onDrop={this.handleDrop.bind(this)}>

所以关键是找出窗口屏幕使用window.screen.availWidth.你会在这个render()功能中做到这一点.希望有所帮助!

Answer 7

就我而言，我只需要在一个组件上设置断点，但我发现这种createTheme方法有点太多了。我结束了使用useMediaQuery和useTheme。

我发现使用useMEdiaQuery你可以非常精细

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

const Component = () => {
  const theme = useTheme();
  const matchesSM = useMediaQuery(theme.breakpoints.down('sm'));
  const matchesMD = useMediaQuery(theme.breakpoints.only('md'));
  const dynamicStyles = {
    ...matchesSM && {margin: '10px 0'},
    ...matchesMD && {margin: '20px 0'}
  }

  return (
    <Grid item xs={12} md={4} sx={{...dynamicStyles}}>
      <div>Children</div>
    </Grid>
  )
}

Answer 8

在 React 的 style 属性中，您只能定义可以在普通 DOM 元素中定义的属性（例如，不能包含媒体查询）

包含该组件的媒体查询的方法是将类名传递给抽屉组件

<Drawer containerClassName="someClass" /> 

然后在 CSS 文件中执行如下操作

@media(min-width: 780px){
  .someClass {
    width: 50%!important;
  }
}