[Avatar] Use variants api #40324
[Avatar] Use variants api #40324
Conversation
mnajdova
added
component: avatar
Netlify deploy previewhttps://deploy-preview-40324--material-ui.netlify.app/ @material-ui/core: parsed: +0.04% , gzip: +0.08% Bundle size reportDetails of bundle changes (Toolpad) |
mnajdova
force-pushed
the
avatar/use-variants-api
branch
from
0868fce
to
ce38384
Compare
| @@ -16,15 +16,10 @@ const Html = styled.html({ | |||
| color: 'red', | |||
| }); | |||
|
|
|||
| const Body = styled.body({ | |||
There was a problem hiding this comment.
This leaking on other pages would complicate our testing, so I moved it to the home page only.
| import { styled } from '@mui/zero-runtime'; | ||
| import { useThemeProps } from '@mui/material/styles'; | ||
| import Person from '@mui/material/internal/svg-icons/Person'; | ||
| import { getAvatarUtilityClass } from '@mui/material/Avatar'; |
There was a problem hiding this comment.
Only these imports were updated.
|
@brijeshb42 I only had to remove the sx prop, everything else worked as expected 🎉 |
| @@ -5,12 +5,6 @@ const { experimental_extendTheme: extendTheme } = require('@mui/material/styles' | |||
|
|
|||
| const theme = extendTheme(); | |||
|
|
|||
| theme.applyDarkStyles = function applyDarkStyles(obj) { | |||
There was a problem hiding this comment.
@mnajdova it appears that this change caused a breaking change in the Avatar component. Since when our team started consuming 5.15.6 we started to observe this error:
"TypeError: t.applyDarkStyles is not a function"
There was a problem hiding this comment.
This should not happen as this deletion is not part of the core @mui/material package and the method has been added in material-ui here.
There was a problem hiding this comment.
We experience same issue. Starting from version @mui/material@5.15.6 the Avatar component crashes with the message TypeError: t.applyDarkStyles is not a function, or TypeError: e.applyStyles is not a function for the later versions. We had to downgrade to @mui/material@5.15.5 in order to fix the problem.
Note: I won't be adding documentation about this API yet, we can document it once we start with the migration guide from emotion to zero-runtime.