如何在反应中更改 Material UI 概述的按钮组边框的颜色？答案

【问题标题】：How to change color of MaterialUI outlined Button Group border in react?如何在反应中更改 Material UI 概述的按钮组边框的颜色？
【发布时间】：2022-01-04 19:12:08
【问题描述】：

我在 react 项目中为用户/管理面板创建了一个仪表板。我通过应用具有轮廓样式的MUI 按钮组来使用抽屉按钮。它为我提供了蓝色按钮边框上的颜色。如何更改按钮的边框颜色？

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

【问题讨论】：

标签： reactjs material-ui buttongroup

【解决方案1】：

您可以将 color 属性传递给 ButtonGroup 组件。例如 -

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

根据您的主题，这些是 2 种颜色 - 主要颜色和次要颜色。你可以通过customising the pallete.修改这些颜色

【讨论】：