Skip to main content

Merge Themes

Themes in StyleX are mutually exclusive and do not merge. If multiple Themes are applied on the same element, the last theme applied wins.

However, you can explicitly define a Theme that merges the values of two or more Themes.

Example​

import * as stylex from '@stylexjs/stylex';
import { vars } from './variables.stylex';

const themeBlueVars = {
  backgroundColor: 'blue',
};
const themeBlue = stylex.createTheme(vars, themeBlueVars);

const themeBigVars = {
  size: '128px',
};
const themeBig = stylex.createTheme(vars, themeBigVars);

const themeBigBlueVars = {...themeBlueVars, ...themeBigVars};
const themeBigBlue = stylex.createTheme(vars, themeBigBlueVars);

The StyleX compiler is able to resolve local object constants and merge them. This is useful to be able to define a Theme that merges the values of two or more other Themes without repetition.