Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
abriginets opened this issue Dec 25, 2024 · 0 comments
Assignees
Labels
status: waiting for maintainer These issues haven't been looked at yet by a maintainer

Comments

@abriginets
Copy link

abriginets commented Dec 25, 2024

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"

@abriginets abriginets added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 25, 2024
@brijeshb42 brijeshb42 self-assigned this Dec 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: waiting for maintainer These issues haven't been looked at yet by a maintainer
Projects
None yet
Development

No branches or pull requests

2 participants