如何为react-jdenticon组件添加border-radius圆角样式？

方案1：外层容器裁切（兼容性最好） #

给<Jdenticon>套一个等宽高的父容器，设置border-radius和overflow: hidden即可裁切出圆角，不需要修改组件内部逻辑：

import React from 'react';
import Jdenticon from 'react-jdenticon';
import './style.css';

function Example(){
  return(
    <div className="jdenticon-wrapper">
      <Jdenticon size="48" value="Hello World" />
    </div>
  );
}

对应CSS：

.jdenticon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%; /* 按需调整圆角大小 */
  overflow: hidden;
}

方案2：后代选择器直接命中内部元素 #

react-jdenticon渲染的结构为外层div包裹<svg>或<canvas>元素，给外层添加自定义类名后，可直接通过后代选择器给内部元素加圆角：

import React from 'react';
import Jdenticon from 'react-jdenticon';
import './style.css';

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

对应CSS：

.custom-jdenticon svg,
.custom-jdenticon canvas {
  border-radius: 8px; /* 按需调整圆角大小 */
}

方案3：CSS-in-JS场景封装（以styled-components为例） #

如果使用styled-components等CSS-in-JS方案，可以直接封装带圆角的自定义组件：

import React from 'react';
import Jdenticon from 'react-jdenticon';
import styled from 'styled-components';

const StyledJdenticon = styled(Jdenticon)`
  svg, canvas {
    border-radius: 50%;
  }
`;

function Example(){
  return(<StyledJdenticon size="48" value="Hello World" />);
}

内容的提问来源于stack exchange，提问作者Panayiotis Georgiou