无法使用 React.js 中的 Material UI 调色板颜色更改边框颜色

Question

我正在 React.js 中使用带有右边框的 MUI 组件创建自定义侧导航栏。

const SideNav = () => {
    return (
        <Stack
            sx={{
                bgcolor: 'background.paper',
                borderColor: 'grey.500', //I want to color my border to grey.500
                borderRight: 1,
                top: 0,
                left: 0,
                position: 'fixed',
                width: 80,
                height: 1
            }}
        >
            <Stack alignItems="center" spacing={2}>
                <IconButton color="primary" aria-label="delete" size="large">
                    <DeleteIcon fontSize="medium" />
                </IconButton>
            </Stack>
        </Stack>
    )
}

export default SideNav

问题是我无法使用 MUI（Material UI）系统的主题颜色更改右边框的颜色。即使我将sx={{borderColor: 'grey.500'}}其设置为默认黑色。而且该应用程序正常执行，没有任何错误，但边框颜色仍然默认为黑色。

Answer 1

所以我刚刚找到了解决这个问题的方法！而不是borderColor: 'grey.500'先写再写，borderRight: 1你需要borderRight: 1先写再写borderColor: 'grey.500'。我不知道为什么，但似乎 MUI 系统在没有边框时无法覆盖边框颜色。

当您想要更改边框颜色时，下面的实现不会更改边框颜色。

sx={{
    bgcolor: 'background.paper',
    borderColor: 'grey.500',//This will not override the default color of the border.
    borderRight: 1,
    top: 0,
    left: 0,
    position: 'fixed',
    width: 80,
    height: 1
}}

这就是我修复它的方法，它按预期工作。

sx={{
    bgcolor: 'background.paper',
    borderRight: 1, //You need to write this first...
    borderColor: 'grey.500', //And write this after if you want to change th color.
    top: 0,
    left: 0,
    position: 'fixed',
    width: 80,
    height: 1
}}