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

【问题标题】：JSS <ThemeProvider>, how to use media queriesJSS <ThemeProvider>，如何使用媒体查询
【发布时间】：2020-04-07 10:33:18
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs media-queries jss

【解决方案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,
}

// ...

【讨论】：