Попытка реализовать значения Dynami c с помощью React-JSS - PullRequest
Новая
       42

Попытка реализовать значения Dynami c с помощью React-JSS

0 голосов
/ 28 апреля 2020

Моя команда использует эту библиотеку CSS с нашим проектом React: https://cssinjs.org/react-jss/?v=v10.1.1#dynamic -значения

Я пытаюсь использовать два динамических значения c, например: 

import React from 'react'
import {createUseStyles} from 'react-jss'

const useStyles = createUseStyles({
  duration: (height, marginTop) => ({
    marginTop: marginTop,
    height: height
  })
});

const Appointment = ({companyName, vehicleId, duration, isHalfHour=false}) => {
  const height = (duration / 0.6).toString().concat('%');
  const marginTop = isHalfHour ? '20px' : '0';  // Note: 20px is 50% of timeContainer.height
  const classes = useStyles(height, marginTop);

  return (
    <div className={classes.duration}>
      Sample Text
    </div>
  )
};

Что интересно, когда у меня только что была переменная height, все работало нормально. Теперь я хочу также передать marginTop. height все еще уважают, но игнорируют marginTop.

Я даже жестко закодировал такие вещи: 

const classes = useStyles(height, '20px');

Но это не решило проблему.

Поэтому мне любопытно, что я делаю неправильно, так что второй параметр в стиле duration не используется?

Ответы [ 2 ]

0 голосов
/ 28 апреля 2020

Непосредственно перед тем, как отправиться спать, я попробовал еще одну вещь: я продолжал задаваться вопросом, почему только первый параметр был принят, а второй был проигнорирован. Поэтому я изменил имя параметра на props и затем передал: {height, marginTop} и вуаля, это сработало !!!

Длинный день!

0 голосов
/ 28 апреля 2020

есть только один аргумент, который вы передаете useStyles(object)

...