mui / mui/material-ui

[Popper] `CSS "margin" styles cannot be used` warning when using with `Stack` component

Open
#33,433 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

component: Popper scope: popup type: expected behavior
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Duplicates
  • I have searched the existing issues
Latest version
  • I have tested the latest version
Current behavior 😯

The SelectUnstyled inside an Stack raises a warning when the Popper opens:

Popper: CSS "margin" styles cannot be used to apply padding between the popper and its reference element or boundary. To replicate margin, use the `offset` modifier, as well as the `padding` option in the `preventOverflow` and `flip` modifiers.
Expected behavior 🤔

No warnings raised, since the element is not given any margin value by hand.

Steps to reproduce 🕹

Steps:

  1. Create a SelectUnstyled.
  2. Create a Stack.
  3. Put the SelectUnstyled inside the Stack.
  4. Try to open the select to see the options.

CodeSandbox.

Context 🔦

No response

Your environment 🌎
  System:
    OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
  Binaries:
    Node: 18.2.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @mui/base: ^5.0.0-alpha.83 => 5.0.0-alpha.83
    @mui/icons-material: ^5.8.2 => 5.8.2
    @mui/material: ^5.8.2 => 5.8.2
    @mui/private-theming:  5.8.0
    @mui/styled-engine-sc: ^5.6.1 => 5.8.0
    @mui/system: ^5.8.2 => 5.8.2
    @mui/types:  7.1.3
    @mui/utils:  5.8.0
    @types/react: ^18.0.3 => 18.0.9
    react: ^18.0.0 => 18.1.0
    react-dom: ^18.0.0 => 18.1.0
    styled-components: ^5.3.5 => 5.3.5
    typescript: ^4.6.4 => 4.7.2

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the warning using the linked CodeSandbox by opening a SelectUnstyled placed inside a Stack. Trace the Popper integration used by that example and determine why Stack causes the warning without an explicit margin; done means the same interaction raises no warning while preserving the spacing behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.