{
const groupElements = container.querySelectorAll(`.${prefix}-wrapper`);
expect(groupElements).toHaveLength(7);
});
+
+ // 测试 avatarStyle 和 avatarClass 属性
+ // Test avatarStyle and avatarClass properties
+ it('avatarStyle and avatarClass render correctly', () => {
+ const { container } = render(
+
,
+ );
+
+ // 通过查询选择器找到带有 'avatar-1' 类的元素，并确保它存在
+ // Find the element with the 'avatar-1' class using a query selector and ensure it exists
+ const avatar1Element = container.querySelectorAll('.avatar-1');
+ expect(avatar1Element).toHaveLength(1);
+ expect(avatar1Element[0].classList.contains('arco-avatar')).toBe(true);
+
+ // 通过查询选择器找到带有 'avatar-2' 类的元素，并确保它存在
+ // Find the element with the 'avatar-2' class using a query selector and ensure it exists
+ const avatar2Element = container.querySelectorAll('.avatar-2');
+ expect(avatar2Element).toHaveLength(1);
+ expect(avatar2Element[0].classList.contains('arco-avatar')).toBe(true);
+ });
});
diff --git a/packages/arcodesign/components/avatar/demo/avatar-with-info.md b/packages/arcodesign/components/avatar/demo/avatar-with-info.md
index e5c4b4c7..374fa9e5 100644
--- a/packages/arcodesign/components/avatar/demo/avatar-with-info.md
+++ b/packages/arcodesign/components/avatar/demo/avatar-with-info.md
@@ -1,6 +1,6 @@
## 加文字(单行文字时，文字与头像水平居中) @en{Add text (for single-line text, the text and the avatar are centered horizontally)}
-#### 8
+#### 9
```js
import { Avatar } from '@arco-design/mobile-react';
diff --git a/packages/arcodesign/components/avatar/demo/custom-class.md b/packages/arcodesign/components/avatar/demo/custom-class.md
new file mode 100644
index 00000000..6e64b314
--- /dev/null
+++ b/packages/arcodesign/components/avatar/demo/custom-class.md
@@ -0,0 +1,34 @@
+## 自定义样式 @en{Custom Style}
+
+#### 8
+
+```js
+import { Avatar } from '@arco-design/mobile-react';
+
+export default function AvatarDemo() {
+ return (
+
+ );
+}
+```
+
+```less
+.avatar-demo-box {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+}
+.avatar-left-margin {
+ .set-prop-with-rtl(margin-left, 24px);
+}
+.avatar-1 {
+ border-radius: 10px;
+ background-color: coral;
+}
+.avatar-2 {
+ width: 1rem;
+}
+```
diff --git a/packages/arcodesign/components/avatar/index.tsx b/packages/arcodesign/components/avatar/index.tsx
index 49737391..2d7704c3 100644
--- a/packages/arcodesign/components/avatar/index.tsx
+++ b/packages/arcodesign/components/avatar/index.tsx
@@ -30,6 +30,7 @@ export function componentGenerator<
decoration = null,
textAvatar = '',
avatarStyle = {},
+ avatarClass = '',
autoFixFontSize = true,
autoFixFontOffset = 2,
avatarName = '',
@@ -103,6 +104,7 @@ export function componentGenerator<
extends BaseProp
* @default {}
*/
avatarStyle?: React.CSSProperties;
+ /**
+ * 头像元素的自定义类名
+ * @en Custom classname for avatar element
+ * @default ""
+ */
+ avatarClass?: string;
/**
* 是否自动根据头像尺寸调整字体大小
* @en Whether to automatically adjust the font size according to the avatar size