reactjs 如何用React改变材质界面中按钮组的颜色？

vyswwuz2 于 2023-03-12 发布在 React

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

我想使用材质UI（https://i.stack.imgur.com/X0aUV.png）创建类似的内容
我用过按钮组，但我不知道如何改变边框的颜色。
现在我有了这个：（https://i.stack.imgur.com/Yg3xZ.png）
我的代码：

<Grid item lg={4} className={style.navGridCenter}>
  <ButtonGroup variant='text' aria-label='text button group' sx={{ background: '#566673','& .MuiButtonGroup-groupedText':{borderColor:'#fff'}}}>

    <Tooltip title="Empresa">
      <Button className={style.navCenterBtn} disableRipple id="Empresa" variant='text'>
        Empresa
      </Button>
    </Tooltip>

    <Tooltip title="Local">
      <Button className={style.navCenterBtn} disableRipple id="Localização" variant='text' aria-label='Localização'>
        Localização
      </Button>
    </Tooltip>

    <Tooltip title="Função">
      <Button className={style.navCenterBtn} disableRipple id="Função do Utilizador" variant='text' aria-label='Função do Utilizador'>
        Função do Utilizador
      </Button>
    </Tooltip>
  </ButtonGroup>
</Grid>

我需要将按钮组的边框颜色更改为#ffffff。我已经尝试过了，但没有效果

sx={{'& .MuiButtonGroup-groupedText':{borderColor:'#fff'}}}

reactjs

来源：https://stackoverflow.com/questions/75698208/how-to-change-color-of-buttongroup-in-material-ui-with-react

3条答案

按热度按时间

qhhrdooz1#

你可以使用.MuiButtonGroup-grouped:not(:last-of-type)类来设置边框的样式。如果你只想改变颜色，使用borderColor来不覆盖其他边框样式。

<ButtonGroup
  sx={{
    ".MuiButtonGroup-grouped:not(:last-of-type)": {
      borderColor: "#FFFFFF",
    },
  }}
  variant="text"
  aria-label="text button group"
>

赞(0）回复(0）举报 2023-03-12

weylhg0b2#

不使用伪类选择器（即& .MuiButtonGroup-groupedText），只需要简单地使用sx中的border属性。问题是你没有设置边框的宽度，只设置了颜色。你的更改没有显示出来，因为我相信宽度是0。你需要告诉它什么类型的边框。在你的情况下，我假设您需要solid边框。

<ButtonGroup
  variant="text"
  aria-label="text button group"
  sx={{
    background: "#566673",
    border: "1px solid white"
  }}
>
...
</ButtonGroup>

赞(0）回复(0）举报 2023-03-12

xxls0lw83#

我试图根据您的截图自定义ButtonGroup。
https://codesandbox.io/s/blissful-payne-ctwkmi?file=/src/App.js:0-1427

import "./styles.css";
import { ButtonGroup, Button, Divider } from "@mui/material";

export default function App() {
  return (
    <div className="App">
      <ButtonGroup
        sx={{
          ".MuiButtonGroup-grouped": {
            borderColor: "transparent",
            borderRadius: 6,
            borderWidth: 3,
            "&:hover": {
              borderColor: "transparent"
            }
          },
          ".MuiButtonGroup-grouped:not(:last-of-type)": {
            "&:hover": {
              borderRightColor: "transparent"
            }
          },
          background: "#4C6C7B",
          borderRadius: 6
        }}
      >
        <Button sx={{ background: "#4c6c7b", color: "#FFF", py: 2 }}>
          First{" "}
        </Button>
        <Divider
          variant="middle"
          orientation="vertical"
          sx={{
            background: "#FFF",
            borderWidth: 2,
            height: "unset"
          }}
        />
        <Button sx={{ background: "#4c6c7b", color: "#FFF", py: 2 }}>
          Second{" "}
        </Button>
        <Divider
          variant="middle"
          orientation="vertical"
          sx={{
            background: "#FFF",
            borderWidth: 2,
            height: "unset"
          }}
        />
        <Button sx={{ background: "#4c6c7b", color: "#FFF", py: 2 }}>
          Last{" "}
        </Button>
      </ButtonGroup>
    </div>
  );
}

改变按钮之间边框的高度有点困难，所以我给出了按钮之间的Divider。
我希望这会有一点帮助。

赞(0）回复(0）举报 2023-03-12

我来回答

reactjs 如何用React改变材质界面中按钮组的颜色？

3条答案

相关问题

热门标签

最新问答