水平图例React-vis

Question

我在React-vis中使用水平图例时遇到问题。我用了这个道具的取向=“ horizo​​ntal”，但是什么也没有……

<DiscreteColorLegend width={2000} orientation="horizontal" items={json.items.map((item) => item.name)} colors={json.items.map((item) => item.color)} />

Answer 1

我只是自己解决了这个问题。就我而言，样式表没有被正确引用。我确实尝试将其导入到js文件顶部，如下所示：

import '../../../../node_modules/react-vis/dist/style.css';

但是，我后来发现样式只有在将我的style.css文件从/ node_modules / react-vis / dist复制到app / assets / stylesheets后才真正起作用，其中application.css文件具有require_tree语句，其中包括有问题的样式表。

这是个小偷的解决方法，因为从/ node_modules / react-vis / dist的主页导入样式表可能是最佳实践，但这对我有用。