динамическое значение react-jss не работает в запросе

я пытался контролировать значение стилей с помощью реквизита, используя react-jss

https://cssinjs.org/react-jss/?v=v10.6.0< /а>

однако динамическое значение не работает в запросе!

этот код управляет глобальным фоновым цветом с помощью react-jss. этот код работает отлично. однако измените цвет фона на использование динамического значения в свойствах. не меняйте значение цвета фона.

const styles = {
  root: {
    backgroundColor: ({ color }) => color 
  },
  "@global": { // with query
    body: {
      backgroundColor: 'yellow' //working!!
    }
  }
};

этот код не работает. Я проверил, что лямбда-функция ({ color }) => color вызывается и значение правильное.

const styles = {
  root: {
    backgroundColor: ({ color }) => color 
  },
  "@global": { // with query
    body: {
      backgroundColor: ({ color }) => color // not working
    }
  }
};

Это полный код с ошибкой.

import React from "react";
import ReactDOM from "react-dom";
import { createUseStyles } from "react-jss";

const styles = {
  root: { // with classKey
    backgroundColor: ({ color }) => color // working
  },
  "@global": { // with query
    body: {
      backgroundColor: ({ globalColor }) => globalColor // not work
    }
  }
};

const useStyles = createUseStyles(styles);

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

  return <h1 className={classes.root}> Background should be yellow</h1>;
};

ReactDOM.render(<App color="yellow" globalColor='red'/>, document.getElementById("root"));

а вот codeandbox, это не мой аккаунт и код

https://codesandbox.io/s/react-jss-dynamic-global-value-j552b


reactjs javascript jss
person leeJB    schedule 28.05.2021    source источник
comment
Я думаю, вам нужно получить доступ к объекту листа, чтобы обновить его после монтирования вашего компонента. См. следующую CodeSandbox. для примера как это было решено   -  person Oluwafemi Sule    schedule 29.05.2021
comment
@OluwafemiSule Я использую библиотеку material-uil, которая, кажется, внутри использует лист jss. Так что нет никакого способа получить лист и обновить его, насколько мне известно. Этот вопрос взят отсюда. stackoverflow.com/questions/67731785 /.   -  person leeJB    schedule 31.05.2021

Ответы (1)


arrow_upward
0
arrow_downward

Если вы используете библиотеку material-ui, используйте makeStyles для создания хука useStyles.

import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from '@material-ui/styles';

const styles = {
  "@global": {
    body: {
      backgroundColor: ({ color }) => color
    }
  }
};

const useStyles = makeStyles(styles);

let App = props => {
  useStyles(props);
  return <h1>Background should be yellow</h1>;
};

ReactDOM.render(<App color="yellow" />, document.getElementById("root"));
person Oluwafemi Sule    schedule 31.05.2021
comment
Спасибо за ваш совет. я думаю, что динамическое значение имеет ошибку в запросе, однако я увидел это и понял, что считал неправильным. Были и более сложные условия. Я организовал более подробную ситуацию здесь. [codesandbox.io /s/ Независимо от того, решена эта проблема или нет, я ценю ваши усилия и время. Благодаря вам я мог знать больше. Спасибо - person leeJB; 01.06.2021