Reactjs媒体查询应用程序

我有一个单独的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 (windowWidth < "700px") ? (
      <hide-sm>
        <grid-4>
          {users.map((user) => {
            return <UserItem key={user.id} user={user} />;
          })}
        </grid-4>
      </hide-sm>
    ) : (
      <div style={userStyle}>
        {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",
};```