-
-
Notifications
You must be signed in to change notification settings - Fork 57
Open
Labels
docsImprovements or additions to the documentationImprovements or additions to the documentationstatus: waiting for maintainerThese issues haven't been looked at yet by a maintainerThese issues haven't been looked at yet by a maintainer
Description
Steps to reproduce
Steps:
- Import
Stack
from@mui/material-pigment-css/Stack
- Add
alignItems="flex-end"
property to it - Observe the
Warning: React does not recognize the
alignItemsprop on a DOM element
message in terminal
Current behavior
React allow setting any prop and will translate it into real DOM, thus adding non-existent alignItems
attribute to div
triggers this warning
Expected behavior
Docs should mention this breaking change. I suppose now any styles defined as props should be migrated to sx
prop for pigment-css to extract?
Wasn't really sure where to post this issue and decided to put it at the source since @mui/material-pigment-css/Stack
simply re-exports pigment-css/react
's Stack
Context
Migrating to MUIv6 + pigment
Your environment
npx @mui/envinfo
System:
OS: Linux 5.15 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
Binaries:
Node: 20.12.2 - ~/.asdf/installs/nodejs/20.12.2/bin/node
npm: 10.5.0 - ~/.asdf/plugins/nodejs/shims/npm
pnpm: Not Found
Browsers:
Chrome: 128.0.6613.137
npmPackages:
@emotion/react: ^11.11.1 => 11.14.0
@emotion/styled: ^11.11.0 => 11.14.0
@mui/base: ^5.0.0-beta.24 => 5.0.0-beta.24
@mui/core-downloads-tracker: 6.3.0
@mui/icons-material: ^6.3.0 => 6.3.0
@mui/lab: ^6.0.0-beta.8 => 6.0.0-beta.21
@mui/material: ^6.3.0 => 6.3.0
@mui/material-next: ^6.0.0-alpha.110 => 6.0.0-alpha.110
@mui/material-nextjs: ^6.3.0 => 6.3.0
@mui/material-pigment-css: ^6.3.0 => 6.3.0
@mui/private-theming: 6.3.0
@mui/styled-engine: 6.3.0
@mui/system: 6.3.0
@mui/types: 7.2.20
@mui/utils: 5.16.4
@mui/x-charts: ^7.15.0 => 7.23.2
@mui/x-charts-vendor: 7.20.0
@mui/x-date-pickers: ^7.15.0 => 7.23.3
@mui/x-internals: 7.23.0
@pigment-css/nextjs-plugin: ^0.0.29 => 0.0.29
@pigment-css/react: 0.0.28
@pigment-css/unplugin: 0.0.29
@types/react: ^18.2.45 => 18.2.45
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^5.6.3 => 5.6.3
Search keywords: "warning", "React does not recognize the alignItems
prop on a DOM element"
Metadata
Metadata
Assignees
Labels
docsImprovements or additions to the documentationImprovements or additions to the documentationstatus: waiting for maintainerThese issues haven't been looked at yet by a maintainerThese issues haven't been looked at yet by a maintainer