如何在反应-牙列组件上添加边界半径?

Question

我使用了react-jdenticon

尝试添加边框半径，但似乎不能在svg或canvas元素上使用css样式

有什么建议吗?

import React from 'react';
import Jdenticon from 'react-jdenticon';
function Example(){
return(<Jdenticon size="48" value="Hello World" />);
}

Answer 1

如果您想自定义SVG图像的css样式。我建议您为此使用jdenticon包。使用jdenticon用以下代码构建一个自定义组件。现在您可以添加CSS类或任何样式到您想要添加的SVG元素。

import React, { useRef, useEffect } from 'react';
import jdenticon from 'jdenticon';
const Jdenticon = ({ value = 'test', size = '100%', className }) => {
const icon = useRef(null);
useEffect(() => {
jdenticon.update(icon.current, value);
}, [value]);
return (
<div>
<svg data-jdenticon-value={value} height={size} ref={icon} width={size} className={className} />
</div>
);
};

现在，你可以这样使用它。

function Usage(){
return(<Jdenticon size="48" value="Hello World", className="custom-name" />);
}

Answer 2

以上解决方案适用于jdenticon包

但是对于react-jdenticon有什么解决方案吗?也许我们可以扩展

<Jdenticon size="48" value="Hello World" 'pass classname here'/>