Theme<>

type Theme<T extends VarGroup<unknown, symbol>>

一个Theme是一个类型，它表示一种样式，这种样式会主题化给定VarGroup中的一组变量。它是调用stylex.createTheme的结果。

import type {VarGroup} from '@stylexjs/stylex';
import * as stylex from '@stylexjs/stylex';

import {vars} from './vars.stylex';

export const theme: Theme<typeof vars> = stylex.createTheme(vars, {
  color: 'red', // OK
  backgroundColor: 'blue', // OK
});

Theme最常见的用例是为特定的一组变量接受一个主题。

虽然在大多数情况下不需要，但Theme也接受一个可选的第二个类型类型参数。

高级用例：`Theme`的唯一类型标识

默认情况下，同一个VarGroup的两个主题具有相同的类型。在大多数情况下，这是期望的行为。但是，在某些情况下，您可能希望每个主题都有唯一的类型标识，以约束可以传递到特定组件的主题。

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

declare const Tag: unique symbol;
export const theme1: Theme<typeof vars, Tag> = stylex.createTheme(vars, {
  color: 'red', // OK
  backgroundColor: 'blue', // OK
});

现在，theme1具有唯一的类型标识，并且vars的另一个Theme将无法满足typeof theme1。

这种高级用例应该很少需要，但在需要时可用。