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

Question

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

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中，并将其用作ThemeProvider的道具，但无济于事。

如何在ThemeProvider中使用媒体查询？

这是我的主应用：

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;

下面是子组件：

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,
}

Answer 1

您可以使用window.matchMedia来执行以下操作：

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

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

  spacing: s => s * 5,
}

// ...