我的自定义css变量在css圆锥渐变函数中不起作用。如何修复?

因此,我试图构建这个自定义组件,以饼图的形式指示方向, 其中方向由图表的切片指示。

我正在使用CSS来实现这一点,但我只是设法使切片成为静态的。我需要切片来改变基于组件道具的角度(开始和结束角度)。

我遇到了将自定义css变量传递到元素和使css圆锥梯度函数与给定变量一起工作的问题。

我不知道这是否重要,但就上下文而言,这是在React项目中,使用顺风顺水的MUI库。

以下是我的组件:

(注意我是如何使用普通文档设置元素属性的。这错了吗?感觉不对,但我没有找到其他方法,如何设置自定义css变量。)

import "./DirectionIndicator.css";

type Props = {
    startAngle: number
    endAngle: number
}

export default function DirectionIndicator(props: Props) {

    const element = document?.getElementById("pieSlice")
    if (element) {
        element.style.setProperty("--startAngle", props.startAngle.toString())
        element.style.setProperty("--endAngle", props.endAngle.toString())
    }

    return (
        <div className={"pieContainer"}>
            <div className={"pieBackground"}>
                <div id="pieSlice" className={"slice"}/>
                <div className={"innerCircle"}>
                    <div className={"content"}>
                        <b>N</b>
                    </div>
                </div>
            </div>
        </div>
    )
}

这是我的css:

(请注意,在class.sice中,有两行包含圆锥梯度函数。它们是相同的,只是其中一行使用了--startAngle和--endAngle变量,而不是硬编码值。当我使用带硬编码值的行时,css运行良好。当我切换到带变量的行时时,slice不显示。我不明白怎么回事。我试图通过JS,并使用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: 0;
    --endAngle: 12;
    transition: all 1000ms;
    width: var(--containerSize);
    height: var(--containerSize);
    border-radius: 100%;
    /*background: conic-gradient(from var(--startAngle)deg, var(--directionColor) var(--endAngle)deg, transparent 1deg);*/
    background: conic-gradient(from 60deg, var(--directionColor) 120deg, transparent 1deg);
}

.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;
}

我将非常感谢任何关于如何解决这个问题的提示。非常感谢。