Question

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

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

我正在使用这样的代码

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

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

代码仅适用于网络，在移动设备上没有任何影响。甚至css代码也没有应用我在开发中检查过。安慰。我使用的是material-ui版本 0.18.7 。

任何帮助都将不胜感激。

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

Answer 1

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

<强> API

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

<强>参数

key（String | Number）：断点键（xs，sm等）或以像素为单位的屏幕宽度数。

<强>返回 media query：准备与JSS一起使用的媒体查询字符串。

<强>实施例

＆＃13;

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

＆＃13;

了解更多信息check this out

Answer 2

这就是您可以执行的操作（快速破解）。物质用户界面会抱怨您进行了不必要的计算。

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

Answer 3

我通过这样的方式解决了这个问题：

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 4

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

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

<Drawer containerClassName="someClass" />

然后在CSS文件中执行类似这样的操作

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

Answer 5

根据@nbkhope的@Lipunov's，对comment的相似答案

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

Answer 6

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

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

代替

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

Answer 7

阅读Material UI文档https://material-ui.com/components/use-media-query/

从'react'导入React；从'@ material-ui / core / styles'导入{createMuiTheme，ThemeProvider，useTheme}; 从'@ material-ui / core / useMediaQuery'导入useMediaQuery;

function MyComponent() {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up('sm'));

  return <span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>;
}

const theme = createMuiTheme();

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

在codeSandbox https://codesandbox.io/s/5xgum?file=/index.js:1-154

中运行此示例

Material-ui组件中的媒体查询

7 个答案: