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

我试图使用它来定义一些我想在我的子组件中使用的默认颜色。问题是，我还希望能够根据媒体查询设置这些颜色。例如：

const theme = {
  "@media (prefers-color-scheme: no preference)": {
    colorPrimary: "black",
  },
  "@media (prefers-color-scheme: dark)": {
    colorPrimary: "white",
  },
  "@media (prefers-color-scheme: light)": {
    colorPrimary: "black",
  },
  spacing: (s) => s * 5,
}

但它不起作用。我还尝试将其添加到createUseStyles中，并将其用作EProvider的道具，但没有成功

如何将媒体查询与电子阅读器配合使用

这是我的主要应用程序：

import React from 'react';
import { createUseStyles, ThemeProvider } from 'react-jss'
import { Header } from './components/header/Header';

const theme = {
  "@media (prefers-color-scheme: no preference)": {
    colorPrimary: "yellow",
  },
  "@media (prefers-color-scheme: dark)": {
    colorPrimary: "yellow",
  },
  "@media (prefers-color-scheme: light)": {
    colorPrimary: "yellow",
  },
  spacing: (s) => s * 5,
}

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <header>
          <Header>
            Hello
          </Header>
        </header>
      </div>
    </ThemeProvider>
  );
}

export default App;

从“React”导入React；
从“react jss”导入{createUseStyles，ThemeProvider}
从“./components/Header/Header”导入{Header}；
常量主题={
“@media（首选配色方案：无首选项）”：{
初级颜色：“黄色”，
},
“@media（首选颜色方案：深色）”：{
初级颜色：“黄色”，
},
“@media（首选配色方案：浅色）”：{
初级颜色：“黄色”，
},
间距：（s）=>s*5，
}
函数App（）{
返回(
你好
);
}
导出默认应用程序；

这是子组件：

import React from 'react';
import PropTypes from 'prop-types';
import {createUseStyles, useTheme} from 'react-jss'

const useStyles = createUseStyles(theme => ({
  header: {
    padding: theme.spacing(2),
    color: theme.colorPrimary,
  },
}))

export const Header = ({children}) => {

  const theme = useTheme();
  const classes = useStyles({...theme});

  return (
    <div className={classes.header}>
      {children}
    </div>
  )
}

Header.propTypes = {
  children: PropTypes.node,
}

从“React”导入React；
从“道具类型”导入道具类型；
从“react jss”导入{createUseStyles，useTheme}
const useStyles=createUseStyles（主题=>({
标题：{
填充：主题。间距（2），
颜色：theme.colorPrimary，
},
}))
导出常量头=（{children}）=>{
const theme=useTheme（）；
const classes=useStyles（{…theme}）；
返回(
{儿童}
)
}
Header.propTypes={
子项：PropTypes.node，
}

您可以使用：

const useDark = window.matchMedia('(prefers-color-scheme: dark)').matches

const theme = {
  background: useDark ? 'black' : 'white',
  colorPrimary: useDark ? 'white' : 'black',

  spacing: s => s * 5,
}

// ...