Unable to change border color using Material UI palette color in React.js

Question

I'm creating a custom side Navigation Bar in React.js using MUI components with a right border.

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

The problem is that I can't change the color of the right border using the Theme color of the MUI (Material UI) system. Even if I set sx={{borderColor: 'grey.500'}} it always default to black color. And also this Application executes normally without any error, but the border-color remains default black.

Answer 1

So I just found the solution to this problem! instead of writing borderColor: 'grey.500' before borderRight: 1 you need to write borderRight: 1 first before writing borderColor: 'grey.500'. I have no idea why but it seems that MUI system can't override the border color when there is no border yet.

The implementation below won't change the border color when you want to change it.

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

This is how I fixed it and it works as expected.

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