Question 73372 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to change color of ButtonGroup in Material UI with React? – Reactjs

I want to to something like this using Material UI (https://i.stack.imgur.com/X0aUV.png)

I’ve used ButtonGroup but I dont know how to change the color of the borders.

At this moment I have this:(https://i.stack.imgur.com/Yg3xZ.png)

My code:

<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>

I need to change the border color of the ButtonGroup to #ffffff.
I’ve tried this but it didn’t work

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

3

Answers


  1. 0

    Instead of using the pseudo class selector you have (i.e. & .MuiButtonGroup-groupedText), just simply use the border property inside sx. The problem is that you are not setting the width of the border, only the color. Your changes are not showing because the width is 0 I believe. You are need to tell it what type of border. In your case, I am assuming you want a solid border.

    <ButtonGroup
  variant="text"
  aria-label="text button group"
  sx={{
    background: "#566673",
    border: "1px solid white"
  }}
>
...
</ButtonGroup>
    Login or Signup to reply.
  2. 0

    You can use the .MuiButtonGroup-grouped:not(:last-of-type) class to style the borders. If you just want to change the color use borderColor to not override the other border styles.

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

    I tried to customize ButtonGroup based on your Screenshot.

    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>
  );
}

    It is a little difficult to change the height of the border between buttons, so I gave Divider between buttons.

    I hope this will help a little.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search