JSS <ThemeProvider>，如何使用媒体查询

import React from 'react';
import { createUseStyles, ThemeProvider } from 'react-jss';

// 定义全局主题样式
const theme = {
  colors: {
    primary: 'blue',
    secondary: 'green',
  },
};

// 创建样式钩子
const useStyles = createUseStyles({
  container: {
    padding: '20px',
    backgroundColor: 'white',
    // 应用媒体查询
    '@media (max-width: 768px)': {
      backgroundColor: 'lightgray',
    },
  },
  title: {
    fontSize: '24px',
    color: ({ theme }) => theme.colors.primary,
  },
  subtitle: {
    fontSize: '18px',
    color: ({ theme }) => theme.colors.secondary,
  },
});

const App = () => {
  const classes = useStyles();

  return (
    // 使用<ThemeProvider>提供全局主题样式
    <ThemeProvider theme={theme}>
      <div className={classes.container}>
        <h1 className={classes.title}>Hello, World!</h1>
        <h2 className={classes.subtitle}>Welcome to my app!</h2>
      </div>
    </ThemeProvider>
  );
};

export default App;