React.js中使用Material UI palette颜色无法修改边框颜色

问题原因 #

MUI 的 sx 属性解析规则中，borderRight: 1 会被默认转换为 border-right: 1px solid currentColor，其中 currentColor 继承当前元素的文本颜色（默认黑色）。你的代码中 borderColor 写在 borderRight 前面，CSS 规则遵循后写的属性优先级更高的原则，因此 borderRight 隐式携带的颜色设置覆盖了你自定义的 borderColor。

解决方案 #

你可以任选以下一种方式修改即可生效：

方法1：调整属性顺序

把 borderColor 放到 borderRight 之后，让自定义颜色优先级更高：

const SideNav = () => {
    return (
        <Stack
            sx={{
                bgcolor: 'background.paper',
                borderRight: 1,
                borderColor: 'grey.500', //移到borderRight后面即可生效
                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>
    )
}

方法2：直接在borderRight中定义完整样式

直接通过 sx 的主题回调写全边框属性，无需单独设置 borderColor：

<Stack
  sx={{
    bgcolor: 'background.paper',
    borderRight: (theme) => `1px solid ${theme.palette.grey[500]}`,
    top: 0,
    left: 0,
    position: 'fixed',
    width: 80,
    height: 1
  }}
>

额外提示

你代码中的 height: 1 在 MUI 的 sx 规则中会被解析为 height: 100%，如果需要让导航栏铺满视口高度，建议修改为 height: '100vh'，避免父元素高度不足导致导航栏显示异常。

内容的提问来源于stack exchange，提问作者Tri Dawn