MUI 구성 요소의 미디어 조회

MUI 구성 요소의 미디어 조회

에서 MUI 컴포넌트를 사용하고 있다.ReactJs어떤 이유에서인지 화면 폭에 따라 반응하도록 일부 컴포넌트를 커스터마이즈해야 합니다.

추가했습니다.media query컴포넌트에 스타일 속성으로 전달하지만 작동하지 않는 경우, 어떤 아이디어라도 있습니까?

다음과 같은 코드를 사용하고 있습니다.

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

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

코드는 웹에서만 작동하며 모바일 디바이스에서는 작동하지 않습니다.심지어.CSS코드가 적용되지 않습니다.개발자 콘솔에서 확인했습니다.MUI 버전 0.18.7을 사용하고 있습니다.

어떤 도움이라도 주시면 감사하겠습니다.

PS: 요건에 따라 화면 크기에 따라 변경해야 합니다.CSS.

테마의 중단점 속성을 사용하면 구성 요소의 그리드 및 숨김 구성 요소에 직접 사용된 것과 동일한 중단점을 사용할 수 있습니다.

API

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

논쟁들

키(String | Number):중단점 키(xs, sm 등) 또는 화면 폭 숫자(픽셀 단위).

미디어 쿼리를 반환합니다.JSS에서 사용할 수 있는 미디어 쿼리 문자열입니다.

예

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

자세한 것은, 이쪽을 봐 주세요.

네 말이 거의 맞았네, 하지만 넌 이 모든 걸어야 해min-width대신minWidth:

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

미디어 쿼리에 오타가 있습니다.다음 구문을 사용해야 하며 예상대로 작동합니다.

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

대신

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

MUI v5에서는 키가 중단점 이름이고 값이 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"set the set(설정)을 의미합니다.Box화면 너비가 내부에 있는 경우 주황색으로 표시xs범위[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>
);

@nbkhope의 코멘트를 바탕으로 한 @Lipunov의 답변과 유사합니다.

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

다음과 같은 방법으로 이 문제를 해결했습니다.

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

그런 다음 재료 UI 요소의 속성으로 추가합니다.

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

그래서 열쇠는 윈도우 화면을 찾아내는 것이다.window.screen.availWidth그리고 당신은 이 일을 하고 있을 것이다.render()기능.도움이 됐으면 좋겠네요!

반응의 스타일 속성에서는 일반 DOM 요소에서 정의할 수 있는 속성만 정의할 수 있습니다(예: 미디어 쿼리는 포함할 수 없습니다).

해당 구성 요소에 대한 미디어 쿼리를 포함할 수 있는 방법은 드로어 구성 요소에 클래스 이름을 전달하는 것입니다.

<Drawer containerClassName="someClass" /> 

그런 다음 CSS 파일에서 다음과 같은 작업을 수행합니다.

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

, 이 컴포넌트에 브레이크 포인트만 .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>
  )
}

CSS 미디어 쿼리는 UI의 응답성을 높이기 위한 관용적인 접근법입니다.테마는 이를 위한 5가지 스타일 도우미를 제공합니다.

teme.breakpoints.up(키)
teme.breakpoints.down(키)
teme.breakpoints.only(키)
teme.breakpoints.not(키)
teme.breakpoints를 지정합니다.between 의 (시작, 종료)

다음 스트레스 테스트에서는 테마 색상과 배경색 속성을 라이브로 업데이트할 수 있습니다.

const styles = (theme) => ({
  root: {
    padding: theme.spacing(1),
    [theme.breakpoints.down('md')]: {
      backgroundColor: theme.palette.secondary.main,
    },
    [theme.breakpoints.up('md')]: {
      backgroundColor: theme.palette.primary.main,
    },
    [theme.breakpoints.up('lg')]: {
      backgroundColor: green[500],
    },
  },
});

<Root>
  <Typography>down(md): red</Typography>
  <Typography>up(md): blue</Typography>
  <Typography>up(lg): green</Typography>
</Root>

자세한 것은 이쪽

변수를 만든 다음 함수에서 해당 변수를 사용합니다.

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

언급URL : https://stackoverflow.com/questions/45847090/media-queries-in-mui-components