CODEWITHSUNDEEP
reactjsmaterial-uibuttongroup
shoieb
shoieb

Reputation: 41

How to change color of MaterialUI outlined Button Group border in react?

I have created a dashboard for the User/Admin panel in react project. I have used drawer buttons by applying MUI Button Group with outlined style. It provided me blue color on the button border. How can I change the border color of buttons?

const buttons = [
    <Button key="one"> <Link className='text-decoration-none' to="/dashboard"> Dashboard </Link></Button>,
    <Button key="two"><Link className='text-decoration-none' to="orders">Manage Orders </Link></Button>,
    <Button key="three"><Link className='text-decoration-none' to="payment">Payment </Link></Button>,
    <Button key="four"><Link className='text-decoration-none' to="review"> Give a Review </Link></Button>,
    <Button key="five"><Link className='text-decoration-none' to="addProduct">Add a Product</Link> </Button>,
    <Button key="six"><Link className='text-decoration-none' to="manageProducts">Manage Products </Link></Button>,
    <Button key="seven"><Link className='text-decoration-none' to="makeAdmin">Make An Admin </Link></Button>,
    <Button key="eight"><Link className='text-decoration-none' to="">Log Out </Link></Button>];


const drawer = (
    <div>
        <Link to="/">
            <img src="../logo1.png"
                width="200"
                height="80"
                className="d-inline-block align-top" alt="B2Me logo" />
        </Link>
        <Divider />
        <div className='py-5 ps-auto' style={{ 'background-color': '#03153a' }}>
            <ButtonGroup
                orientation="vertical"
                aria-label="large button group"
                variant="outlined"
                size="large"
                sx={{ p: 1, backgroundColor: 'white' }}
            >
                {buttons}
            </ButtonGroup>
        </div>
        <Divider />
    </div >
);

`

Output Screenshot

Upvotes: 4

Views: 16587

Answers (1)

Sunny R Gupta
Sunny R Gupta

Reputation: 5126

You could pass the color prop to the ButtonGroup component. e.g -

            <ButtonGroup
                orientation="vertical"
                aria-label="large button group"
                variant="outlined"
                color="secondary"
                size="large"
                sx={{ p: 1, backgroundColor: 'white' }}
            >
                {buttons}
            </ButtonGroup>

These are the 2 colors - primary and secondary as per your theme. You could modify these colors by customising the pallete.

Upvotes: 3

Related Questions