尝试使用 React-JSS 实现动态值答案

【问题标题】：Trying to implement Dynamic Values with React-JSS尝试使用 React-JSS 实现动态值
【发布时间】：2020-08-11 23:30:16
【问题描述】：

我的团队在我们的 React 项目中使用这个 CSS 库：https://cssinjs.org/react-jss/?v=v10.1.1#dynamic-values

我正在尝试使用这样的两个动态值：

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 样式的第二个参数？

【问题讨论】：

标签： css reactjs dynamic jss

【解决方案1】：

就在睡觉之前，我尝试了最后一件事：我一直想知道为什么只接受第一个参数而忽略第二个参数。于是我把参数名改成props，然后传入：{height, marginTop}，瞧，成功了！！！

漫长的一天！

【讨论】：

【解决方案2】：

只有一个参数可以传递给useStyles(object)

【讨论】：