---
title: "composeStyles"
description: "按序拼接多份 styles 声明，让用户规则与 DEFAULT_STYLES 共存而不是互相顶掉。"
canonical_url: "https://sigma.mhaibaraai.cn/docs/utils/compose-styles"
---
# composeStyles

> 按序拼接多份 styles 声明，让用户规则与 DEFAULT_STYLES 共存而不是互相顶掉。

## 用法

sigma 拿到 `styles.nodes` 时是**整体替换** `DEFAULT_STYLES.nodes` 而非合并，只声明一条 `color` 规则，丢掉的却是一整套。`SigmaGraph` 因此默认用它把基础规则、用户的 `styles` 与库内规则拼成一份声明，通常不必直接调用。

单条规则与规则数组一视同仁地摊平，`undefined` 的来源直接跳过；某一侧全空时不产出该键，交回 sigma 自己的默认值。三档基础规则的取舍，以及切到 `none` 之后规则坍塌的实际效果，见 [`SigmaGraph`](https://sigma.mhaibaraai.cn/docs/components/graph) 的 `stylesBase` 小节，那里可以逐档切换查看。

### 拼接顺序即覆盖顺序

sigma 的规则数组按序求值，后者覆盖前者。最终交给构造函数的次序固定为「基础规则 → 用户的 styles → 库内规则」。库内规则排在最后，[`useSigmaSelection()`](https://sigma.mhaibaraai.cn/docs/composables/use-sigma-selection) 的淡出与 [`useSigmaLabelTiers()`](https://sigma.mhaibaraai.cn/docs/composables/use-sigma-label-tiers) 的标签分级才盖得住用户自定义的配色；想完全自己控制这两处外观，把 `dim` 关掉、不使用分级即可。

### 被顶掉的默认规则

**visibility**: 最要命的一条。whenState: 'isHidden' 的绑定丢了之后，useSigmaFilter()、SigmaLegend 与 useSigmaState() 的隐藏路径全部静默失效——过滤照常算出该藏谁，画面上却什么都没变。

**label 的属性绑定**: 节点标签直接消失。

**悬浮反馈**: size 的悬浮放大、labelVisibility 的悬浮强显，以及六项 backdrop* 标签背板。

**size / color 的属性绑定与兜底值**: 自己的规则没覆盖到的那部分节点会掉回 sigma 的硬编码默认值。

> [!NOTE]
> 
> x
> 
>  / 
> 
> y
> 
>  是唯一的例外：
> 
> postEvaluateNode()
> 
>  在规则求值之后有一段兜底，样式没给就直接读节点属性，所以坐标不会因此丢失。

## API

### composeStyles()

`composeStyles(...sources: (SigmaStyles | undefined)[]): SigmaStyles`

#### Parameters

**sources** (`(SigmaStyles | undefined)[]`): 待拼接的 styles 声明，按传入顺序求值，后者覆盖前者。undefined 直接跳过。

#### Returns

`SigmaStyles`，`nodes` / `edges` / `stage` 三个键各自摊平为规则数组，空的键不产出。

类型从根出口取：

```ts
import type { SigmaStyles } from '@movk/sigma'
```


## Sitemap

See the full [sitemap](https://sigma.mhaibaraai.cn/sitemap.md) for all pages.