定制化

可以通过将参数传递给“useStyleProvider”函数来自定义“Style provider”的行为。此外，您可以覆盖默认主题的全局变量或创建您自己的主题。

useStyleProvider 的参数

useStyleProvider 函数接受以下参数：

emulate - 强制在浏览器中创建 Style provider 模拟 (无需在服务器端传递参数，模拟将自动创建。),
noscript - 将 Style provider 模拟转换为字符串后，从中移除脚本，仅保留初始 CSS 样式（对 SSG 很有用）。,
global (^4.2.0) - 将 Style provider 保存并用作全局对象,
attrs - Style provider 属性:
- pre - 样式表名称前缀,
- mode - 用于生成唯一选择器的模式（a - 数据属性，c - 类）,
- min - 用于生成缩减作用域选择器的模式（布尔属性）,
- size - 覆盖全局 CSS 变量中的基础尺寸,
- time - 覆盖基准时间的全局 CSS 变量,
- angle - 覆盖全局 CSS 变量中的基础角度,
- color (^4.3.0) - 覆盖全局 CSS 变量的基础颜色,
- easing (^4.4.0) - 覆盖全局 CSS 变量中的基础缓动函数，
- contrast (^4.8.0) - 覆盖全局 CSS 变量中对比色，
- neutral (^4.8.0) - 覆盖全局 CSS 变量中性色。

主题

EffCSS 主题是一组全局 CSS 变量。

主题的创建/更新/删除是通过主题控制器对象进行的，该对象可通过 Style provider 对象的 theme 属性访问：

import { useStyleProvider } from 'effcss';

const provider = useStyleProvider();
const themeVars = {
    size: 18,
    time: 150,
    angle: 15,
    color: 'green',
    sz: {
        s: 10,
        m: 20,
        l: 30
    },
    coef: {
        1: 0.05,
        32: 220,
        15: 1.9
    },
    hue: {
        sec: 220,
    },
    $light: {
        lightness: {
            bg: {
                s: 0.785
            }
        },
        chroma: {
            fg: {
                rich: 0.145
            }
        }
    }
};
// 您可以覆盖默认主题变量
provider.theme.update(themeVars);
// 你可以添加一个新主题
provider.theme.add(themeVars, 'custom');
// 您可以启用新主题
provider.theme.switch('custom');

请注意特殊的顶级键$light和$dark，它们分别设置浅色和深色配色方案的变量上下文。

要访问大小、时间和角度的全局变量，请分别使用size、time和angle实用程序。

要访问颜色的全局变量，请使用color.root实用程序。

数值系数及其范围可通过coef实用程序获得。

hue、lightness和chroma对象由palette实用程序使用。

要在StyleSheet maker函数中使用任意主题变量，请使用themeVar实用程序：

import { TStyleSheetMaker } from 'effcss';

type TGlobalVars = {
    sz: {
        s: string;
        m: string;
        l: string;
    }
};

export const maker: TStyleSheetMaker = ({ themeVar }) => {
    return {
        '.sz-m': {
            width: themeVar<TGlobalVars>('sz.m', '100px') // '100px' - 后备值
        }
    };
};

多主题

要对特定 HTML 元素使用全局主题以外的主题，请调用不带参数的use函数，并将具有所需主题的修饰符传递给生成的解析器：

import type { TBaseStyleSheetMaker } from 'effcss';
import { useStyleProvider } from 'effcss';

const consumer = useStyleProvider();
const [resolver] = consumer.use();
const attrs = resolver<TBaseStyleSheetMaker>('..theme.custom');

覆盖全局变量 (^4.5.0)

您可以使用 Web 组件effcss-override为布局的各个部分设置和重新定义全局变量，而不是定义多个主题。为此，请将使用prepareOverrideValues实用程序准备的字符串传递给values属性：

jsx

import { prepareOverrideValues } from 'effcss';

const overridedValues = prepareOverrideValues({
    size: 32,
    hue: {
        pri: 10
    },
    $light: {
        lightness: {
            bg: {
                xl: 0.95
            }
        }
    }
});

export const Component = () => <effcss-override neutral="grey" color="purple" values={overridedValues}>
    <div>...</div>
<effcss-override>`

从 4.8.0 版本开始，您还可以使用与 Style provider 相同的属性（例如，size、angle、color）重新定义全局变量。这些属性的优先级高于 values 中的值。

从版本 ^4.9.0 开始，您可以使用 scheme 属性覆盖组件及其内容的配色方案。此属性可以取值 light 或 dark。

effcss-override 组件默认具有 display:contents; 样式，以免导致布局变化。

定制化 ​

useStyleProvider 的参数 ​

主题 ​

多主题 ​

覆盖全局变量 (^4.5.0) ​

定制化

useStyleProvider 的参数

主题

多主题

覆盖全局变量 (^4.5.0)