material-ui FormControlLabel具有默认的margin-right,这是有意为之吗？

goqiplq2 于 3个月前发布在其他

关注(0)|答案(3)|浏览(58)

重复问题

我搜索了现有的问题

当前行为 😯

FormControlLabel组件有一个默认的margin-right: 16px。这使得可重用性和与其他组件的对齐变得棘手。如果我们想要使标签具有全宽度且可点击，我们必须删除这个边距。

预期行为 🤔

FormControlLabel组件应该默认没有右边距。

重现步骤 🕹

https://codesandbox.io/s/falling-cookies-5lgnno?file=/src/Demo.tsx

上下文 🔦

我想让FormControlLabel具有全宽度且可点击，并将图标放置在该组件的右侧。
这个margin-right: 16px正在干扰这一点：

你的环境 🌎

npx @mui/envinfo

System:
    OS: macOS 12.5
  Binaries:
    Node: 16.13.1 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.6
  npmPackages:
    @emotion/react: 11.10.0 => 11.10.0
    @emotion/styled: 11.10.0 => 11.10.0
    @mui/icons-material: 5.8.4 => 5.8.4
    @mui/lab: 5.0.0-alpha.93 => 5.0.0-alpha.93
    @mui/material: 5.9.3 => 5.9.3
    @mui/system: 5.9.3 => 5.9.3
    @mui/x-data-grid: 5.15.1 => 5.15.1
    @mui/x-data-grid-generator: 5.15.1 => 5.15.1
    @mui/x-data-grid-pro: 5.15.1 => 5.15.1
    @mui/x-date-pickers: 5.0.0-beta.4 => 5.0.0-beta.4
    @mui/x-date-pickers-pro: 5.0.0-beta.4 => 5.0.0-beta.4
    @types/react: 18.0.17 => 18.0.17
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    styled-components: 5.3.5 => 5.3.5
    typescript: 4.7.4 => 4.7.4

material-ui

来源：https://github.com/mui/material-ui/issues/34039

3条答案

按热度按时间

dzjeubhm1#

感谢报告。我同意，除非必要，否则不应该给任何组件添加外边距。然而，改变这个可能会导致破坏性的变化。目前，我建议在你们这边添加一个覆盖设置，通过设置 marginRight: 0 ,或者直接取消设置，我会在 v6 里程碑中添加这个，以便我们以后再回来处理。我对改变行为有些不情愿，因为到目前为止它还没有出现问题。

赞(0）回复(0）举报 3个月前

93ze6v8z2#

感谢@mnajdova!
我正在设置marginRight: 0,使其暂时生效。
我很好奇为什么添加了marginRight,我相信在组件创建时添加这个是有原因的。
干杯！

赞(0）回复(0）举报 3个月前

6ioyuze23#

根据我从提交中看到的内容，它被添加是为了与复选框和单选按钮(假设它们是内联的)一起正常工作。现在我们有了 Stack 组件，我认为这不再必要了，而且会带来惊喜(就像它对你的使用案例一样)。如果我们决定朝这个方向发展，我们将在v6版本中回顾并更新样式。

赞(0）回复(0）举报 3个月前