带边框的 Material-UI 垂直 ToggleButtonGroup 样式错误答案

【问题标题】：Material-UI vertical ToggleButtonGroup style error with border带边框的 Material-UI 垂直 ToggleButtonGroup 样式错误
【发布时间】：2020-09-27 14:26:49
【问题描述】：

我正在为我的前端项目使用 React Material UI ToogleButtonGroup。

https://codesandbox.io/s/eyk66?file=/demo.js

这是 Material UI ToggleButtonGroup 多选示例代码。我把它改成了垂直样式。

当我选择两个或更多按钮时，按钮的左边框会消失。

我为每个切换按钮添加了边框颜色，但没有幸运。请帮帮我！

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我自己找到了解决方案。

 style={{outlineColor: 'red', outlineWidth: '1px', outlineStyle: 'solid', margin: '2px'}}

而不是style={{borderColor: 'red'}}，我使用了概述的css。它完美地显示了边界。

当我们将上述样式添加到每个 ToggleButton 时，我们可以看到每个边框。

<ToggleButtonGroup value={formats} orientation="vertical" onChange={handleFormat} aria-label="text formatting">
  <ToggleButton value="bold" aria-label="bold" style={{outlineColor: 'red', outlineWidth: '1px', outlineStyle: 'solid', margin: '2px'}}>
    <FormatBoldIcon />
  </ToggleButton>
  <ToggleButton value="italic" aria-label="italic" style={{outlineColor: 'red', outlineWidth: '1px', outlineStyle: 'solid', margin: '2px'}}>
    <FormatItalicIcon />
  </ToggleButton>
  <ToggleButton value="underlined" aria-label="underlined" style={{outlineColor: 'red', outlineWidth: '1px', outlineStyle: 'solid', margin: '2px'}}>
    <FormatUnderlinedIcon />
  </ToggleButton>
  <ToggleButton value="color" aria-label="color" disabled style={{outlineColor: 'red', outlineWidth: '1px', outlineStyle: 'solid', margin: '2px'}}>
    <FormatColorFillIcon />
    <ArrowDropDownIcon />
  </ToggleButton>
</ToggleButtonGroup>

谢谢大家的帮助！！！

【讨论】：

【解决方案2】：

这是垂直切换按钮的选定状态样式中的一个错误。我在这里记录了这个问题：https://github.com/mui-org/material-ui/issues/22779。问题的要点是所选状态正在接收用于水平方向的selected-state style modifications：

export const styles = (theme) => ({
  /* Styles applied to the root element. */
  root: {
    '&$selected': {
      '& + &': {
        borderLeft: 0,
        marginLeft: 0,
      },
    }
  }
}

为了解决这个问题，我们需要撤消 borderLeft 更改（没有必要撤消 marginLeft 更改，因为它在垂直方向上已经为零）并且我们需要将等效更改应用于“顶部”而不是“左侧”。双 & 号增加了特异性，以帮助确保这些样式覆盖优于默认样式。

import MuiToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
import { withStyles, fade } from "@material-ui/core/styles";

const ToggleButtonGroup = withStyles((theme) => ({
  groupedVertical: {
    "&&.Mui-selected + &&.Mui-selected": {
      borderLeft: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
      borderTop: 0,
      marginTop: 0
    }
  }
}))(MuiToggleButtonGroup);

【讨论】：