Dynamic var

[olivierpascal]

Hello,

Sorry if that question already been asked, but I did not find any answer yet.

Is there a way to make that work?

const vars = stylex.defineVars({
  primary: 'var(--primary)',
});

const styles = stylex.create({
  container: {
    color: theme.primary,
  }
});

<div style={{ '--primary': 'green' }}>
  <div {...stylex.props(styles.container)}>
    That should be green.
  </div>
</div>

Here, vars.primary is compiled to var(--xydh4zs.

Thanks.

[olivierpascal]

I have found another way using only stylex vars.

[nmn]

You should never need to use inline styles (style=) when using StyleX. You can use StyleX vars as keys or values in static or dynamic styles.

This should work:

const vars = stylex.defineVars({
  primary: 'var(--primary)',
});

const styles = stylex.create({
  colorSetter: {
    [theme.primary]: 'green',
  },
  container: {
    color: theme.primary,
  }
});