Repository navigation
When nesting themes, child themes do not inherit unspecified tokens from a parent theme #2002
Description
Describe the issue
According to StyleX documentation, when nesting themes, a child theme would inherit unspecified tokens from the parent theme if they are overridden in the parent theme. In practice however, it inherits unspecified tokens from the original var group instead.
Expected behavior
A nested child theme should inherit unspecified tokens from the parent theme if they are overridden in the parent theme.
Steps to reproduce
- Define a variable group in a separate
.stylex.tsfile:
import * as stylex from "@stylexjs/stylex";
export const colors = stylex.defineVars({
primary: "white",
secondary: "white",
});- Define two themes that partially override that variable group:
const parentTheme = stylex.createTheme(colors, {
primary: 'blue',
})
const childTheme = stylex.createTheme(colors, {
secondary: "red",
});- Apply themes by nesting and observe that unspecified variables in the child theme inherit from the original var group instead of the parent theme:
export default function App() {
return (
<div {...stylex.props(parentTheme)}>
<div {...stylex.props(childTheme)}>
<div {...stylex.props(styles.square)}/>
</div>
</div>
);
}
const styles = stylex.create({
square: {
backgroundColor: colors.primary,
height: 100,
width: 100
},
});Test case
Playground example using the steps described above:
The square's background color should have been blue instead of white as specified by parentTheme.
Additional comments
No response
Activity
[-]When nesting themes, child themes do not inherit unspecified tokens from a parent theme[/-][+]When nesting themes, child themes do not inherit unspecified variables from a parent theme[/+][-]When nesting themes, child themes do not inherit unspecified variables from a parent theme[/-][+]When nesting themes, child themes do not inherit unspecified tokens from a parent theme[/+]kgeminicdev commentedon Nov 2, 2026
Root cause:
createThemereturns`${overrideClass} ${varGroupHash}`as the class, anddefineVarsemits its defaults under:root, .${varGroupHash}. So the child element also gets the var group class, which re-declares every default at that level and shadows what the parent theme set. The override class only declares the tokens you pass, so it's the group class that resets the rest.Two options: drop
varGroupHashfrom the theme's class value (it's still the keypropsmerges on, so one theme per group still wins), or keep it and fix the "Partial overrides" section of the docs. Is the group class there on purpose, e.g. for vars used outside:root? Happy to send a PR for whichever you prefer.