javascript - 如何在 react-jdenticon 组件上添加边框半径？

Question

我用过react-jdenicon

尝试添加边框半径，但似乎无法在 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'/>