मैं कुछ डिफ़ॉल्ट रंगों को परिभाषित करने के लिए उपयोग करने की कोशिश कर रहा हूं जिन्हें मैं अपने बच्चे के घटकों के भीतर उपयोग करना चाहता हूं। समस्या यह है कि मैं उन रंगों को मीडिया के प्रश्नों के अनुसार सेट करने में सक्षम होना चाहता हूं। उदाहरण के लिए:

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 में जोड़ने का भी प्रयास किया और इसे बिना किसी लाभ के थीमप्रोवाइडर के लिए प्रोप के रूप में उपयोग किया।

मैं थीमप्रोवाइडर के साथ मीडिया प्रश्नों का उपयोग कैसे कर सकता हूं?

यह मेरा मुख्य ऐप है:

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,
}
2
devamat 14 पद 2019, 04:30

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

// ...
0
Lionel Rowe 3 सितंबर 2020, 18:41