material-ui 当使用Stack组件时,CSS "margin"样式无法使用的警告

fsi0uk1n  于 4个月前  发布在  其他
关注(0)|答案(1)|浏览(63)

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
w3nuxt5m

w3nuxt5m1#

  • 请注意,这不是一个错误,只是一个警告,仅在开发环境中可见。

spacing={3} 添加到 Stack 组件中,如您所见,将边距应用于 SelectUnstyled 组件。如果您取消选中 margin-left 或者从 Stack 中删除 spacing prop,您会看到警告消失。
我们为 Popper 组件使用 @popperjs/core 包,因此我认为完全消除警告超出了我们的控制范围。

相关问题