如何在VictoryLegend组件的样式道具内圆角边框?

Question

我想为使用VictoryLegend组件的图形创建一个图例。我画了一个边框，然后想画圆角。下面是代码:

<VictoryLegend
x={300}
y={15}
orientation="horizontal"
style={{
border: { stroke: '#808080' },
}}
gutter={13}
data={[
{
name: 'regular',
symbol: { fill: '#808080', type: 'minus' },
labels: { fontFamily: 'Lato', fontSize: 10 },
},
]}
/>

我该怎么做?我尝试在border对象内部使用borderRadius，在它之外，没有任何工作。

Answer 1

从来没有使用过胜利图表，这是我第一次听说它。所以也许我错了，但从来源我可以看到以下。

VictoryLegend接受borderComponent，它是任何简单的组件。我打赌你应该能做一些像

<VictoryLegend
borderComponent={<rect rx="15"/>}
/>

bordercomponent应该是原生SVG组件我猜。https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect

Answer 2

VictoryLegend组件有一个prop来代替默认的边框组件。

如本文所述，您可以传入一个组件实例，该实例将负责呈现图例周围的边框。你可以用任何你喜欢的方式来修饰这个组件的外观。

<VictoryLegend
borderComponent={<RoundedBorder width={300}/>}
x={300}
y={15}
orientation="horizontal"
style={{
border: { stroke: '#808080' },
}}
gutter={13}
data={[
{
name: 'regular',
symbol: { fill: '#808080', type: 'minus' },
labels: { fontFamily: 'Lato', fontSize: 10 },
},
]}
/>

这是一个我放在一起的RoundedBorder组件，如果它工作，请告诉我。

import React from "react";
const RoundedBorder = (props) => {
// eslint-disable-next-line react/prop-types
const { desc, ...rest } = props;
return desc ? (
<>
<rect
rx="15"
vectorEffect="non-scaling-stroke"
{...rest}
>
<desc>{desc}</desc>
</rect>
</>
) : (
<rect
rx="15"
vectorEffect="non-scaling-stroke"
{...rest}
/>
);
};
export default RoundedBorder;