水平图例 React-vis

Question

我在 React-vis 中遇到水平图例问题。 我使用了这个道具orientation="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 中的主页导入样式表可能是最佳实践，但它对我有用。