css.createTheme

如何在 React Strict DOM 中从变量创建样式主题。

概述

此 API 创建的主题会覆盖使用 defineVars() 创建的样式变量的默认值。 它返回一个不透明的样式对象，可以传递给任何 html.* 元素的 style 属性。 然后，该主题将应用于整个子树。 可以使用数组样式组合主题对象。

示例

import { css } from 'react-strict-dom';
import { colors, spacing } from './vars.stylex.js';

const themeColors = css.createTheme(colors, {
  accent: 'red',
  textPrimary: 'black',
  textSecondary: 'brown',
});

const themeSpacing = css.createTheme(spacing, {
  small: '0.25rem',
  large: '0.5rem'
});

const theme = [ themeColors, themeSpacing ];

const Theme = (props) => <html.div {...props} style={theme} />

API

变量

createTheme 的第一个参数必须是 defineVars 调用的返回值。 这将确定给定的 createTheme 调用可以覆盖哪些变量。

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

const themeColors = css.createTheme(colors, { ... })

覆盖

createTheme 的第二个参数是一个变量值覆盖的对象，其中每个键必须与提供给 defineVars 的对象的键匹配。

vars.stylex.js

export const colors = css.defineVars({
  accent: 'blue',
  textPrimary: 'black',
  textSecondary: '#333',
});

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

const themeColors = css.createTheme(colors, {
  accent: 'red',
  textPrimary: 'black',
  textSecondary: 'brown',
})