Skip to content

[docs][pigment-css-react] Warning: React does not recognize the alignItems prop on a DOM element #357

@abriginets

Description

@abriginets

Steps to reproduce

Steps:

  1. Import Stack from @mui/material-pigment-css/Stack
  2. Add alignItems="flex-end" property to it
  3. Observe the Warning: React does not recognize the alignItems prop 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 documentationstatus: waiting for maintainerThese issues haven't been looked at yet by a maintainer

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions