如何将react-jazzicon生成的MetaMask头像改为方形而非圆形？

react-jazzicon默认通过外层容器的border-radius: 50%实现圆形效果，你可以通过以下几种方式修改为方形：

方法1：通过父容器CSS强制覆盖样式 #

用一个div包裹Jazzicon组件，然后通过CSS覆盖内部容器的圆角样式：

// 组件代码
<div className="jazzicon-square-wrapper">
  <Jazzicon diameter={100} seed={jsNumberForAddress(walletID)} />
</div>

/* 全局或组件内CSS */
.jazzicon-square-wrapper > div {
  border-radius: 0 !important;
}

因为组件内部的容器使用了内联样式，所以需要用!important来强制覆盖默认的圆角设置。

方法2：通过React Ref直接修改DOM样式 #

使用useRef获取组件容器，在useEffect中修改其样式，避免使用!important：

import { useRef, useEffect } from 'react';

// 组件内部
const jazziconRef = useRef(null);

useEffect(() => {
  // 获取Jazzicon生成的外层容器div
  const container = jazziconRef.current?.firstElementChild;
  if (container) {
    container.style.borderRadius = '0';
  }
}, [walletID]); // 当钱包ID变化时重新设置样式

// 渲染部分
<div ref={jazziconRef}>
  <Jazzicon diameter={100} seed={jsNumberForAddress(walletID)} />
</div>

方法3：自定义Jazzicon实现（进阶） #

如果不想依赖第三方组件的样式限制，可以直接基于底层的jazzicon库自己实现组件，完全控制容器样式：

import jazzicon from 'jazzicon';

const SquareJazzicon = ({ diameter, seed }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      // 清空容器内容
      containerRef.current.innerHTML = '';
      // 生成jazzicon并挂载到容器
      const icon = jazzicon(diameter, seed);
      containerRef.current.appendChild(icon);
      // 移除默认的圆角样式
      icon.style.borderRadius = '0';
    }
  }, [diameter, seed]);

  return <div ref={containerRef} style={{ width: diameter, height: diameter }} />;
};

// 使用自定义组件
<SquareJazzicon diameter={100} seed={jsNumberForAddress(walletID)} />

内容的提问来源于stack exchange，提问作者Gary Lin