How to implement dynamic compoundVariants

[huijiewei]

Like

I write dynamic compoundVariants

but throw error A style value can only contain an array, string or number.

export const buttonVariantStyles = stylex.create({
  solid: {
    base: {
      borderWidth: 2,
    },
    color: (color: Colors) => ({
      borderColor: colors[`${color}500`],
    }),
  },
  outline: {},
});

[nmn]

I write dynamic compoundVariants

This is not allowed, You can't arbitrarily nest styles more than one level deep. You can split up into multiple variables though:

export const buttonSolidStyles = stylex.create({
    base: {
      borderWidth: 2,
    },
    color: (color: Colors) => ({
      borderColor: colors[`${color}500`],
    }),
});

export const buttonOutlineStyles = stylex.create({ ... });

Also, not sure where colors is coming from in your example.

[huijiewei]

thanks, colors from defineVars

[nmn]

What you're doing works, but it relies on inline styles. Ideally, you wouldn't use a function but repeat the color style for each possible value in Colors statically.

It's not a big deal, but just letting you know about the best practice.