MUI 组件中的媒体查询

Posted 2023-02-22

【中文标题】MUI 组件中的媒体查询

【英文标题】：Media queries in MUI components

【发布时间】：2018-02-01 11:29:27

【问题描述】：

我在 ReactJs 项目中使用 MUI 组件，出于某种原因，我需要在某些组件中进行自定义以使其根据屏幕宽度做出响应。

我添加了media query 并将其作为样式属性传递到组件中，但不起作用，有什么想法吗？

我正在使用这样的代码：

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


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

代码仅适用于网络，在移动设备上无效。即使CSS 代码也没有应用我已经在开发者控制台中检查过。我正在使用 MUI 版本 0.18.7。

任何帮助将不胜感激。

PS：根据要求，我需要根据屏幕大小使用CSS进行一些更改。

【问题讨论】：

如何在声明块中定义react，你能举个例子吗？我对 React 很陌生，为什么

【参考方案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',
    ,
  ,
);

更多信息check this out

【讨论】：

这应该是答案

@JasbirRana ["@media (min-height:800px)"]: marginTop: 10

【参考方案2】：

这就是你可以做的（快速破解）。 Material UI 会抱怨你做了不必要的计算。

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

【讨论】：

好答案。参考github.com/mui-org/material-ui/blob/master/packages/material-ui/… 以查看方法up() 和down() 在方括号内输出如答案所示的字符串。

['@media (min-width:780px)'] 在数组中进行媒体查询将给出no-useless-computed-key。仅使用'@media (min-width:780px)' 并且有效。

【参考方案3】：

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

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

而不是

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

【讨论】：

亲爱的@croraf，请将您的答案放在括号内。就像这样：['@media (min-width: 780px)']，没有大括号，你的答案还不起作用。谢谢。

感谢您的建议。我认为没有他们也行。当内部有变量时需要大括号，因此在这种情况下需要对其进行评估，它是一个字符串，因此不需要。

【参考方案4】：

与@Lipunov's 类似的答案，基于@nbkhope 的comment

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

【参考方案5】：

在MUI v5中，可以在sx props 中声明断点，方法是指定一个对象，其中键是断点名称，值是 CSS 值。

您可以看到 MUI 默认断点here。可以使用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" 表示如果屏幕宽度在xs 范围[300, 600) 之内，则将Box 颜色设置为橙色。

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

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

【讨论】：

谢谢！这对于简洁的语法非常有用。

这应该是认可的答案！

很棒的解决方案。只是xxs 断点不是默认的，可能从示例中删除它。

【参考方案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() 函数中执行此操作。希望对您有所帮助！

【参考方案7】：

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

您可以为该组件包含媒体查询的方式是将类名传递给抽屉组件

<Drawer containerClassName="someClass" /> 

然后在一个 CSS 文件中你做这样的事情

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

【讨论】：

我知道，但这没有任何意义，它只会将 Css 类添加到该容器中，而不是在需要的内部元素或容器中，不是吗？。

抱歉应该是 containerClassName 而不是 className（更新答案），应该将类添加到抽屉容器中，然后您可以使用 CSS 轻松修改其宽度

我只是以这个（抽屉）为例，在任何情况下我的媒体查询都不起作用。

好像是抽屉在容器中添加了内联样式，这样样式有更多的优先级，你可以尝试在宽度的末尾加上!important

是的，我确实同意它可以工作，但只能在父容器上而不是在该容器的子容器上。无论如何，这也不是首选方式。

【参考方案8】：

创建一个变量，然后在函数的任何地方使用该变量

import React from 'react';
import  createMuiTheme, ThemeProvider, useTheme  from '@materialui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';
    

function MyComponent() 
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up('sm')); // Variable for media query 
  return <span hidden=matches>Hidden on screen size greater then sm </span>;


const theme = createMuiTheme();

export default function ThemeHelper() 
  return (
    <ThemeProvider theme=theme>
      <MyComponent />
    </ThemeProvider>
  );

【讨论】：

阅读材料 ui doc material-ui.com/components/use-media-query