React结合Fluent UI与hooks实现描边颜色条件渲染（可选值处理）

核心逻辑梳理 #

先在组件内明确颜色优先级：优先使用 props.data?.lineChartData?.[0]?.color，当该值不存在时，回退到 useSample() 返回的 sam.line.stroke。这里用可选链替代强制非空断言，避免潜在的空值报错。

具体修改方案 #

方案1：Griffel 动态样式（符合Fluent UI样式规范，推荐）

如果继续使用Griffel的makeStyle，需要定义支持动态参数的样式，再传入计算后的颜色：

1. 定义带参数的样式：

import { makeStyles } from '@griffel/react';

const useStyles = makeStyles({
  sparklinePath: {
    // 接收颜色参数，动态设置描边和填充色
    stroke: (color: string) => color,
    fill: (color: string) => color,
    // 保留原有其他静态样式，比如线宽、透明度等
    strokeWidth: 2,
    fillOpacity: 0.3,
  },
});

2. 在组件内计算颜色并应用样式：

import { useSample } from './your-sample-hook-path';

const SparklineBase = (props: YourPropsType) => {
  const sam = useSample();
  // 计算最终颜色，处理可选值
  const lineColor = props.data?.lineChartData?.[0]?.color || sam.line.stroke;
  // 传入颜色参数生成样式
  const styles = useStyles(lineColor);

  return (
    // 假设折线是用path元素渲染的，应用样式类
    <svg>
      <path className={styles.sparklinePath} d={yourPathData} />
    </svg>
  );
};

方案2：内联样式（快速验证场景）

如果只是快速验证效果，也可以直接用内联样式绑定计算后的颜色：

const SparklineBase = (props: YourPropsType) => {
  const sam = useSample();
  const lineColor = props.data?.lineChartData?.[0]?.color || sam.line.stroke;

  return (
    <svg>
      <path
        style={{
          stroke: lineColor,
          fill: lineColor,
          strokeWidth: 2,
          fillOpacity: 0.3,
        }}
        d={yourPathData}
      />
    </svg>
  );
};

为什么之前的Griffel方案无效？ #

大概率是因为你之前的makeStyle是静态定义的颜色，没有通过动态参数传递计算后的条件值，导致样式没有根据props动态更新。通过给makeStyle的规则添加参数，就能实现基于条件的颜色渲染。

内容的提问来源于stack exchange，提问作者Egeon