CODEWITHSUNDEEP
cssreactjsdynamicjss
robertwerner_sf
robertwerner_sf

Reputation: 1313

Trying to implement Dynamic Values with React-JSS

My team uses this CSS library with our React project: https://cssinjs.org/react-jss/?v=v10.1.1#dynamic-values

I'm trying to utilize two dynamic values like this:

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>
  )
};

What's interesting is that when I just had the height variable, everything worked fine. I now want to also pass in marginTop. height is still respected but it ignores marginTop.

I even hardcoded things like this:

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

But that didn't solve the problem.

So I'm curious what I'm doing wrong such that the 2nd parameter into the duration style isn't used?

Upvotes: 0

Views: 1237

Answers (2)

robertwerner_sf
robertwerner_sf

Reputation: 1313

Just before heading to sleep, I tried one last thing: I kept wondering why only the first parameter was accepted and the second one was ignored. So I changed the parameter name to props and then passed in: {height, marginTop} and voila, it worked!!!

Long Day!

Upvotes: 1

Oleg Isonen
Oleg Isonen

Reputation: 1493

there is is only one argument that you pass to useStyles(object)

Upvotes: 0

Related Questions