Themed vars are not propagated about stylex HOT 8 CLOSED

My bad, when I meant 'I cannot externally theme the component anymore', i wanted to say that if a themeB is applied to a parent element of the component, since the component is already themed by themeA, themeA will always override themeB.

from stylex.

This is expected behaviour as it is how CSS variables work. To give you a peek behind the scenes, this the CSS that would be generated:

(I'm using readable names, but the actual output would use hashes)

:root {
  /* colorScheme = defineVars */
  --primary: red;
  /* myComponentVars = defineVars */
  --text: var(--primary);
}

.theme {
  --primary: green;
}

Setting the theme in JS, is essentially setting a class name which sets a new value for --primary. However, the value for --text has not changed. The value for --text was only set globally, and at that level --primary is still red.

Here's the workaround:

import React from 'react';
import { colorScheme } from './colorScheme.stylex';
import { myComponentVars } from './myComponentVars.stylex';

const theme = stylex.createTheme(colorScheme, {
  primary: 'green',
});
const componentTheme = stylex.createTheme(myComponentVars, {
  text: colorScheme.primary,
});

const styles = stylex.create({
  container: {
    color: colorScheme.primary, // <- theme is applied (output green)
    color: myComponentVars.text, // <- theme is not applied (output red)
  },
});

export const MyComponent = () => <div {...stylex.props(styles.container, theme, componentTheme)}>TEXT</div>;

This will re-assign the value of --text to the new local value of --primary.

from stylex.

@nmn The problem of this workaround is that I cannot externally theme the component anymore, because it's already using a theme internally.

from stylex.

Themes, created with CSS variables, don't need to be on the component itself. They can be set on a parent element.

from stylex.

Sure but it will be overridden by the local theme in the component div

from stylex.

@olivierpascal Since the component is not being styled by StyleX, I think you'll need to use a different system to override its styles.

from stylex.

Explain your problem a bit further. With some code examples?

from stylex.

Closing this issue as it seems addressed and there have been no follow-ups. Will re-open if you message again @olivierpascal

from stylex.