如何通过 Tailwind 和 React 有条件地应用类名 (JIT)？ [解决]

Question

I have the following object map:

const stylesMap = {
  level: {
    1: "text-5xl",
    ...
  },
};

In my component I have:

const ComponentExample = (props) => {
  const { level } = props;
  return (
    <h1 className={classNames(stylesMap.level[level ?? stylesMap.level[1]])}>
      Test
    </h1>
  );
};

As a test I have made level: null expecting the values "text-5xl" to be part of the classNames list but I don't see it. I'm simply trying to set default values if the props are null.

I even add safelist: ["text-5xl"] in the tailwindcss config but that didn't work even though its already picked up in stylesMap Am I missing anything?

Answer 1

I know what happened. I was passing the actual value instead of the key.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

const ComponentExample = (props) => {
  const { level } = props;
  return (
    <h1 className={classNames(stylesMap.level[level ?? 1])}>
      Test
    </h1>
  );
};

Answer 2

you can use clsx library. It's used for applying classNames conditionally.

<h1 className={clsx({[stylesMap.level[1]: level]})}>
   Test
</h1>

Ex:

const menuStyle = clsx({
        [classes.root] : true, //always applies
        [classes.menuOpen] : open //only when open === true
    })

For your reference: https://www.npmjs.com/package/clsx

Answer 3

You could use ternary condition check for this.

 const ComponentExample = (props) => { const { level } = props; return ( <h1 className={level === null? "text-5xl": null}> Test </h1> ); };

Answer 4

You can try it this way

const ComponentExample = (props) => {
  const { level } = props;
  return (
    <h1
      className={
        stylesMap?.level && stylesMap?.level[1]
          ? stylesMap.level[1]
          : 'text-5xl'
      }
    >
      Test
    </h1>
  );
};

Answer 5

Condition = condition to check for deciding which className to give

trueValue = the className to give in case the condition is true

falseValue = the className to give in case the condition is false

<h1 className={condition ? trueValue : falseValue}>
     Test
</h1>