自定义CSS变量无法在conic-gradient中生效，如何解决？

问题根源 #

1. 缺少角度单位：设置--startAngle和--endAngle时仅传递数字，未添加deg单位，conic-gradient要求角度值必须带单位，浏览器无法识别纯数字角度。
2. DOM操作时机错误：组件render阶段直接调用document.getElementById时，DOM元素尚未挂载到页面，无法获取目标元素导致CSS变量设置失败。

修复方案 #

1. 给CSS变量添加角度单位 #

设置变量时，将角度值与deg单位拼接后传入，确保浏览器能正确解析。

2. 用React的useEffect处理DOM操作 #

将设置CSS变量的逻辑放入useEffect钩子中，确保DOM挂载后执行操作，同时监听startAngle和endAngle的变化，实现动态更新。

3. 优化CSS渐变写法 #

调整conic-gradient的终止角度逻辑，避免显示异常。

修改后的组件代码 #

import { useEffect, useRef } from "react";
import "./DirectionIndicator.css";

type Props = {
    startAngle: number;
    endAngle: number;
};

export default function DirectionIndicator(props: Props) {
    const sliceRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (sliceRef.current) {
            sliceRef.current.style.setProperty("--startAngle", `${props.startAngle}deg`);
            sliceRef.current.style.setProperty("--endAngle", `${props.endAngle}deg`);
        }
    }, [props.startAngle, props.endAngle]);

    return (
        <div className="pieContainer">
            <div className="pieBackground">
                <div ref={sliceRef} className="slice" />
                <div className="innerCircle">
                    <div className="content">
                        <b>N</b>
                    </div>
                </div>
            </div>
        </div>
    );
}

修改后的CSS代码 #

.pieContainer {
    height: var(--containerSize);
    position: relative;
    --containerSize: 100px;
    --innerCircleSize: 70px;
    --directionColor: #590;
    --innerCircleColor: #fff;
}

.pieBackground {
    position: absolute;
    width: var(--containerSize);
    height: var(--containerSize);
    border-radius: 100%;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
}

.slice {
    --startAngle: 0deg;
    --endAngle: 12deg;
    transition: all 1000ms;
    width: var(--containerSize);
    height: var(--containerSize);
    border-radius: 100%;
    background: conic-gradient(from var(--startAngle), var(--directionColor) var(--endAngle), transparent 0);
}

.innerCircle {
    position: absolute;
    width: var(--innerCircleSize);
    height: var(--innerCircleSize);
    background-color: var(--innerCircleColor);
    border-radius: 100%;
    top:  calc((var(--containerSize) - var(--innerCircleSize)) / 2);
    left:  calc((var(--containerSize) - var(--innerCircleSize)) / 2);
    box-shadow: 2px 5px 8px rgba(0,0,0,0.5) inset;
    color: black;
}

.innerCircle .content {
    position: absolute;
    display: block;
    width: var(--innerCircleSize);
    top: 5px;
    left: 0;
    text-align: center;
    font-size: 12px;
}

额外说明 #

• 使用useRef替代document.getElementById是React推荐的方式，避免全局DOM查询，更符合组件化思想。
• conic-gradient最后用transparent 0可确保渐变结束后直接透明，避免多余角度间隙。

内容的提问来源于stack exchange，提问作者Radek Šváb