這里道具.數據！。lineChartData！[0].顏色！可以是可選的，所以在代碼中修改什么，如果它被定義，那么它應該從props.data渲染筆畫顏色！。lineChartData！[0].顏色！else from Sam . line stroke where Sam = use sample()，請檢查照片中以前嘗試過的代碼。 makestyle的使用 由griffel圖書館提供

export const SparklineBase = (props: ISparklineProps) => {
  const myclass = useClasses();
  const mycolor = useColorStyles();
  const sam = useSample();
  const margin = React.useRef({
    top: 2,
    right: 0,
    bottom: 0,
    left: 0,
  });
  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
  const x = React.useRef<any>();
  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
  const y = React.useRef<any>();
  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
  const area = React.useRef<any>();
  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
  const line = React.useRef<any>();
  const [_points, setPoints] = React.useState<ILineChartDataPoint[] | null>(null);
  const [_width] = React.useState<number>(props.width! || 80);
  const [_height] = React.useState<number>(props.height! || 20);
  const [_valueTextWidth] = React.useState<number>(props.valueTextWidth! || 80);
  React.useEffect(() => {
    area.current = d3Area()
      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
      .x((d: any) => x.current(d.x))
      .y0(_height)
      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
      .y1((d: any) => y.current(d.y))
      .curve(d3curveLinear);
    line.current = d3Line()
      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
      .x((d: any) => x.current(d.x))
      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
      .y((d: any) => y.current(d.y))
      .curve(d3curveLinear);
    const points = props.data!.lineChartData![0].data;
    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
    const [xMin, xMax] = d3Extent(points, (d: any) => d.x);
    x.current = d3ScaleLinear()
      .domain([xMin, xMax])
      .range([margin.current.left!, _width - margin.current.right!]);
    y.current = d3ScaleLinear()
      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
      .domain([0, d3Max(points, (d: any) => d.y)])
      .range([_height - margin.current.bottom!, margin.current.top!]);
    setPoints(points);
  }, [_height, _width, props.data]);
  const drawSparkline = React.useCallback(() => {
    const strokeColor = props.data!.lineChartData![0].color || mycolor[1];
    const fillColor = props.data!.lineChartData![0].color || mycolor[2];
    // const a = mergeClasses(props.data!.lineChartData![0].color, sam.line);
    return (
      <>
        <path
          className={` ${strokeColor}`}
          // className={sam.line}
          d={line.current(_points)}
          fill={'transparent'}
          opacity={1}
          strokeWidth={2}
          stroke={props.data!.lineChartData![0].color!}
        />
        <path
          className={` ${fillColor}`}
          // className="area"
          d={area.current(_points)}
          opacity={1}
          fillOpacity={0.2}
          fill={props.data!.lineChartData![0].color!}
          aria-label={`Sparkline with label ${props.data!.lineChartData![0].legend!}`}
        />
      </>
    );
  }, [_points, mycolor, props.data, sam.line]);
  const classNames = getClassNames(props.styles!, {
    theme: props.theme!,
  });

我試過像這樣的鉤子，但它只是圍繞著顏色。使用griffel提供的makestyle函數嘗試解決方案

你可以有條件地渲染: https://legacy . react js . org/docs/conditional-rendering . html # inline-if-else-with-conditional-operator

看起來應該是這樣的:

{props.data!.lineChartData![0].color! ? props.data!.lineChartData![0].color! : /*fallback colour*/ }

您的代碼有許多可空的屬性，所以有時會產生意想不到的結果。檢查屬性是否存在是好的。

stroke={props.data && props.data.hasOwnProperty('lineChartData') && props.data.lineChartData.length > 0 && props.data.lineChartData[0].color ? props.data.lineChartData[0].color : sam.line}