diff --git a/.changeset/yellow-seas-attend.md b/.changeset/yellow-seas-attend.md new file mode 100644 index 00000000..9b985a11 --- /dev/null +++ b/.changeset/yellow-seas-attend.md @@ -0,0 +1,5 @@ +--- +'@matrix-widget-toolkit/mui': patch +--- + +Prevent leak of colorHash prop to the DOM when using an avatar diff --git a/packages/mui/src/components/ElementAvatar/ElementAvatar.tsx b/packages/mui/src/components/ElementAvatar/ElementAvatar.tsx index 03457a8e..fbb4e245 100644 --- a/packages/mui/src/components/ElementAvatar/ElementAvatar.tsx +++ b/packages/mui/src/components/ElementAvatar/ElementAvatar.tsx @@ -86,7 +86,7 @@ export type ElementAvatarProps = { } & AvatarProps; const StyledAvatar = styled(Avatar, { - shouldForwardProp: (p) => p !== 'color', + shouldForwardProp: (p: string) => !['color', 'colorHash'].includes(p), })<{ colorHash: number }>(({ theme, colorHash }) => ({ // increase the specificity of the css selector to override styles of // chip or button components that provide their own css for avatars.