Javascript chartist.js图形的条件CSS

我正试着把我的头脑集中在这个问题上。根据Y的第一个值是否小于或大于数据系列中Y的最后一个值，如何使用CSS有条件地呈现图表图表中线条的颜色

内联样式类似于：

style={{series[0]

，有一个样式属性被ChartistGraph组件用于内联css样式，但是我无法让它工作

我已经添加了代码来重现这个问题

谢谢你的帮助

编辑：

---

在

MiniGraphs

组件中，您可以获得所需的值，并使用类名更改所需的线颜色，如下所示：

// Get all values
const all = mapper.series[0];

// Get first + last
const first = all[0];
const last = all[all.length - 1];

// Get className
const lineColor = first > last ? "red" : "green";

// Render
return (
    <>
        {
            historicalPrice && (
                <ChartistGraph
                    className={"line-" + lineColor} // <-- Add className
                    data={mapper}
                    options={chartOptions}
                    type="Line"
                />
            )
        }
    </>
)

不要忘记包含样式文件：

import./styles.css'

非常感谢您的帮助。我刚刚检查了你的沙箱并实现了代码。但是我觉得好像有个bug在什么地方？在沙箱中，线条仍然是相同的颜色。同样在我的项目中。你能分享链接吗？我去看看。确定你包含了css文件吗？嘿，请查看我上面的新更新。是的，这些CSS文件都包括在内，除了根据标准正确匹配的线条颜色外，其他一切都正常工作。
                                  <MiniGraphs
                                    historicalPrice={historicalPrice.filter(
                                      (i) => i.symbol === data.symbol
                                    )}
                                      dateRange={date}
                                      symbol={data.symbol}
                                    />

.line-red .ct-line {
  stroke: red !important;
}
.line-green .ct-line {
  stroke: green !important;
}

// Get all values
const all = mapper.series[0];

// Get first + last
const first = all[0];
const last = all[all.length - 1];

// Get className
const lineColor = first > last ? "red" : "green";

// Render
return (
    <>
        {
            historicalPrice && (
                <ChartistGraph
                    className={"line-" + lineColor} // <-- Add className
                    data={mapper}
                    options={chartOptions}
                    type="Line"
                />
            )
        }
    </>
)