时间戳

首页 > 解决方案 > 尝试使用 React-JSS 实现动态值

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

问题描述

我的团队在我们的 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没有使用样式中的第二个参数？

标签： cssreactjsdynamicjss

解决方案

临睡前，我尝试了最后一件事：我一直想知道为什么只接受第一个参数而忽略第二个参数。所以我将参数名称更改为props然后传入：{height, marginTop}瞧，它起作用了！！！

漫长的一天！

推荐阅读