Reactjs Приложение медиа-запросов

Question

У меня есть отдельный файл App. css с глобальными атрибутами css и классами для реагирования. Проблема в том, что я хочу отображать элементы по-разному для отдельных устройств, но не могу понять, как это сделать, поскольку условные выражения не применяются как таковые.

import UserItem from "./UserItem";
import Spinner from "../layout/Spinner";
import PropTypes from "prop-types";

const Users = ({ users, loading }) => {
  if (loading) {
    return <Spinner />;
  } else {
    return (
      <div style={userStyle} className='body'>
        {users.map((user) => {
          return <UserItem key={user.id} user={user} />;
        })}
      </div>
    );
  }
};

const windowWidth = window.innerWidth;

Users.propTypes = {
  users: PropTypes.array.isRequired,
  loading: PropTypes.bool.isRequired,
};

const userStyle = {
  display: "grid",
  gridTemplateColumns: "repeat(3, 1fr)",
  gridGap: "1rem",
};

export default Users;

My css @media query which I am trying to apply to effect change on a small device.

/* Mobile Styles */
@media (max-width: 700px) {
  .hide-sm {
    display: none;
  }
}

How do I implement this @media css style so that it can render the page differents through jsx?

Answer 1

Я предлагаю использовать запрос CSS @media для создания адаптивных макетов. Но если вы настаиваете на реализации с JS и React, вы должны получить windowWidth после монтирования компонента. Для этого вы можете использовать хук useEffect и сохранить значение в состоянии:

const [windowWidth, setWindowWidth] = useState('');
useEffect(() => {
    setWindowWidth(window.innerWidth) // or better one -> window.clientWidth
});

Answer 2

Вы можете использовать материал ui. это выполнит ваше требование. Пожалуйста, проверьте этот пример:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import { green } from '@material-ui/core/colors';

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

export default function MediaQuery() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Typography variant="subtitle1">{'down(sm): red'}</Typography>
      <Typography variant="subtitle1">{'up(md): blue'}</Typography>
      <Typography variant="subtitle1">{'up(lg): green'}</Typography>
    </div>
  );
}

Материал UI

Вы также можете использовать следующий пример.

class Card extends Component {

  constructor() {

    super();

    this.mediaQuery = {
      desktop: 1200,
      tablet: 768,
      phone: 576,
    };

    this.state = {
      windowWidth: null
    };
  }

  componentDidMount() {
    window.addEventListener('resize', () => {
      this.setState({windowWidth: document.body.clientWidth})
    });
  }

  render() {
    return (
      <div style={{
        width: this.state.windowWidth > this.mediaQuery.phone
          ? '50%'
          : '100%',
        //more styling :)
      }}>
        <!-- <Card> contents -->
      </div>
    );
  }
}

Источник