How can we pass a color as a prop?-CodePudding

I have a component which has the color white if it is active and black if it is inactive. How can a pass the color black as a prop?

My code right now (it does nothing):

export function Card (props) {
  return <div {...props} className={styles.gray} />
}

I want to use this component (called Card) in a ternary operator to show if the component is active or not.

CodePudding user response：

Is styles the name of your css style sheet and gray the selector?

There are a bunch of different ways to create this behavior, but an easy one if you have a props object with color as a prop, you can do: <div style={{ color: props.color }}

CodePudding user response：

Assuming that you are setting the active state outside of the card, here's the simple ternary pattern.

If active is defined outside of the card:

function Card({ isActive, ...props }) {
  return (
    <div
      className={`${styles.gray} ${isActive ? styles.active : null}`}
      {...props}
    />
  )
}

Using a helper like clsx, it would look like:

<div className={
  clsx(
    styles.gray,
    isActive ? styles.active : null,
  )
} />