Custom css vars & get class name

[olivierpascal]

Hello,

I am using stylex and I need to make it compatible with a third-party library I am using.

This library requires for theming:

• a class name in editorClassName prop
• css vars

I want to style it with:

const styles = stylex.create({
  editor: {
    '--baseBg': myStylexVars.baseBg, // does not work
  },
});

Questions:

• How to extract only the classname of styles.editor?
• How to declare the css var --baseBg in stylex?

Thanks.

[nmn]

const styles = stylex.create({
  editor: {
    '--baseBg': myStylexVars.baseBg, // does not work
  },
});

This should work with StyleX. There's likely a different issue. Could you share a small repro?

[meza]

should this work with defineVars too?

[nmn]

What is "this" in your question? Could you expand a bit?

[meza]

Haha, yes, sorry!

I was referring to creating --customVar in defineVars.

I've started a discussion about it in the meantime: #562

[nmn]

@meza you don't get to control the actual variable name generated when using defineVars. There are technical reasons for this. It's also a good way to avoid conflicts due to a global namespace.