Подключать стили sx только при определнной высоте вьюпорта

Есть такая таблица

<TableContainer component={Paper}>
  <Table
    sx={{
      borderTop: `1px solid ${theme.palette.other.divider}`,
      minWidth: 500,
      mt: 22,
    }}
    aria-label="jobs pagination table"
  >
    <TableHead>
      <TableRow>
        {tableTitles.map((title, idx) => (
          <TableCell key={idx}>
            <Typography
              sx={
                title === 'Действия'
                  ? { textAlign: 'right', color: 'text.secondary' }
                  : { color: 'text.secondary' }
              }
            >
              {title}
            </Typography>
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
    <TableBody>
      {jobsData?.jobs?.map(row => {
        const src = instruments?.find(
          i => i?.configName === row?.tool
        )?.icon;

        return (
          <Link
            key={row.job_id}
            passHref
            href={`${window.location.origin}/job/${row.job_id}`}
          >
            <StyledTableRow>
              <TableCell sx={{ width: 550, py: 0 }}>
                <Box sx={{ mt: 1.5, ml: 1 }}>
                  <Box
                    sx={{
                      display: 'flex',
                    }}
                  >
                    {src && (
                      <Image
                        width={24}
                        height={24}
                        src={src}
                        alt="toolInfoIcon"
                      />
                    )}
                    <Typography
                      typography="subtitle1"
                      sx={{
                        ml: 2,
                        color: 'text.primary',
                      }}
                    >
                      {configToVisible.get(row.tool)}
                    </Typography>
                  </Box>
                  <Typography
                    typography="Caption"
                    sx={{
                      color: 'text.secondary',
                      ml: 1,
                      mb: 1.5,
                      width: '100%',
                    }}
                  >
                    {row.description}
                  </Typography>
                </Box>
              </TableCell>
              <TableCell>
                <Typography
                  typography="body2"
                  sx={{ color: 'text.primary' }}
                >
                  {format(Number(row.created_at), 'dd.MM.yyyy')} в&nbsp;
                  {format(Number(row.created_at), 'HH:mm')}
                </Typography>
              </TableCell>
              <TableCell>
                <Box sx={{ display: 'flex' }}>
                  <Box sx={{ pt: 0.25 }}>{getIcon(row)}</Box>
                  <Typography
                    typography="subtitle1"
                    sx={{
                      pl: 1,
                      color: getColor(row.status),
                    }}
                  >
                    {row.status}
                  </Typography>
                </Box>
              </TableCell>
              <TableCell>
                <Typography
                  sx={{
                    textDecoration: 'underline',
                    color: 'secondary.main',
                  }}
                  typography="caption"
                >
                  <a onClick={e => e.stopPropagation()} href="#">
                    {row.username}
                  </a>
                </Typography>
              </TableCell>
              <TableCell>
                <DownloadButton apiFetcher={apiFetcher} item={row} />
                <CopyToClipboardButton job_id={row.job_id} />
              </TableCell>
            </StyledTableRow>
          </Link>
        );
      })}
    </TableBody>
  </Table>
  <UsePagination
    setCurrentPage={setCurrentPage}
    page={currentPage}
    setPage={setCurrentPage}
    countAll={jobsData?.pages_total}
  />
</TableContainer>

И вот такой хедер

<Box
  position="fixed"
  maxWidth="1152px"
  width="100%"
  top={0}
  sx={{
    opacity: 100,
    mt: 6,
    pt: 2,
    pr: {
      md: '50px',
      lg: '0px',
      xs: '50px',
    },
    backgroundColor: 'white',
    zIndex: 200,
  }}
>
  <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
    <Typography variant="h1">{intl.get('JOBS')}</Typography>
  </Box>
  <Box
    sx={{
      my: 2,
      display: 'flex',
      flexWrap: 'wrap',
      justifyContent: 'space-between',
      alignItems: 'center',
    }}
    className="filters"
  >
    <Autocomplete
      id="instruments"
      options={allInstruments}
      value={instrument}
      onChange={(event, newValue) => {
        setInstrument(newValue);
      }}
      size="small"
      sx={{ mt: 0.2, flexGrow: 2 }}
      getOptionLabel={tool => tool.title}
      renderInput={params => <TextField {...params} label="Инструменты" />}
    />

    {usersData && (
      <Autocomplete
        id="authors"
        value={author}
        onChange={(event, newValue) => {
          setAuthor(newValue);
        }}
        options={allUsers}
        size="small"
        sx={{ ml: 2, mr: 1.5, mt: 0.2, flexGrow: 2 }}
        getOptionLabel={tool => tool.name}
        renderInput={params => <TextField {...params} label="Авторы" />}
      />
    )}

    <DatePickerComponent defaultDate={todayMinusTwoWeeks} label="С" />
    <Box sx={{ ml: 0.5 }}>-</Box>
    <DatePickerComponent defaultDate={today} label="По" />
  </Box>
  <Box sx={{ mb: 3, display: 'flex', alignItems: 'center' }}>
    <TextField
      sx={{ mr: 2, flexGrow: 1 }}
      variant="outlined"
      value={comment}
      size="small"
      onChange={e => setComment(e.target.value)}
      id="input-with-icon-textfield"
      label="Поиск по комментариям"
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <SearchOutlinedIcon />
          </InputAdornment>
        ),
      }}
    />
    <Button
      sx={{ minWidth: 154, minHeight: 40, mb: 0.2 }}
      variant="contained"
      color="primary"
      endIcon={<FilterListIcon />}
      onClick={() => handleSubmit()}
      size="small"
    >
      {intl.get('APPLY')}
    </Button>

    <Tooltip title={intl.get('CLEAN_FILTERS')} placement="top">
      <IconButton
        onClick={() => cleanFiltersHandler()}
        sx={{ ml: 1, color: 'action.active' }}
      >
        <DeleteSweepIcon />
      </IconButton>
    </Tooltip>
  </Box>
</Box>

В хедере есть бокс с такими стилями

<Box
  position="fixed"
  maxWidth="1152px"
  width="100%"
  top={0}
  sx={{
    opacity: 100,
    mt: 6,
    pt: 2,
    pr: {
      md: '50px',
      lg: '0px',
      xs: '50px',
    },
    backgroundColor: 'white',
    zIndex: 200,
  }}

Хочу сделать так чтобы эти стили или даже сам бокс появлялся только при определенной высоте, то есть изначально стили не работают, но когда высота становится меньше 1000px, то эти стили активизируются и хедер становится fixed и сделать это нужно обязательно через sx то есть через mui стили, нельзя использовать отделеьный файл со стилями, в котором можно прописать медиа запросы, подскажите, а лучше покажите как сделать какой-то медиа запрос именно на высоту, чтобы по брекпойнту включались стили?