diff --git a/client/web/src/components/UserAvatar.tsx b/client/web/src/components/UserAvatar.tsx
index a3267747..c80f0409 100644
--- a/client/web/src/components/UserAvatar.tsx
+++ b/client/web/src/components/UserAvatar.tsx
@@ -2,19 +2,24 @@ import React from 'react';
 import { Avatar } from 'tailchat-design';
 import { useCachedUserInfo } from 'tailchat-shared';
 
+interface UserAvatarProps {
+  userId: string;
+  className?: string;
+  style?: React.CSSProperties;
+  size?: 'large' | 'small' | 'default' | number;
+}
+
 /**
  * 用户头像组件
  */
-export const UserAvatar: React.FC<{
-  userId: string;
-  className?: string;
-}> = React.memo((props) => {
-  const { userId, className } = props;
-  const cachedUserInfo = useCachedUserInfo(userId);
+export const UserAvatar: React.FC<UserAvatarProps> = React.memo((props) => {
+  const cachedUserInfo = useCachedUserInfo(props.userId);
 
   return (
     <Avatar
-      className={className}
+      className={props.className}
+      style={props.style}
+      size={props.size}
       src={cachedUserInfo.avatar}
       name={cachedUserInfo.nickname}
     />
diff --git a/client/web/src/components/UserName.tsx b/client/web/src/components/UserName.tsx
index 194f828e..97d43eb4 100644
--- a/client/web/src/components/UserName.tsx
+++ b/client/web/src/components/UserName.tsx
@@ -1,13 +1,20 @@
 import React from 'react';
 import { useCachedUserInfo } from 'tailchat-shared';
 
-export const UserName: React.FC<{
+interface UserNameProps {
   userId: string;
   className?: string;
-}> = React.memo((props) => {
-  const { userId, className } = props;
+  style?: React.CSSProperties;
+}
+
+export const UserName: React.FC<UserNameProps> = React.memo((props) => {
+  const { userId, className, style } = props;
   const cachedUserInfo = useCachedUserInfo(userId);
 
-  return <span className={className}>{cachedUserInfo.nickname}</span>;
+  return (
+    <span className={className} style={style}>
+      {cachedUserInfo.nickname}
+    </span>
+  );
 });
 UserName.displayName = 'UserName';
diff --git a/client/web/tailchat.d.ts b/client/web/tailchat.d.ts
index e60fe980..0893ecc3 100644
--- a/client/web/tailchat.d.ts
+++ b/client/web/tailchat.d.ts
@@ -474,11 +474,17 @@ declare module '@capital/component' {
 
   export const ErrorBoundary: any;
 
-  export const UserAvatar: any;
+  export const UserAvatar: React.FC<{
+    userId: string;
+    className?: string;
+    style?: React.CSSProperties;
+    size?: 'large' | 'small' | 'default' | number;
+  }>;
 
   export const UserName: React.FC<{
     userId: string;
     className?: string;
+    style?: React.CSSProperties;
   }>;
 
   export const Markdown: any;