Search code examples
reactjsstyled-components

Using rgba in box-shadow with styled-components not working

I have this code:

const Test = styled.img`
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 1px rgba(27, 31, 36, 0.15);
`;

export default function Avatar(props: AvatarProps): ReactElement {
    return <Test src={props.avatar} alt={props.name} className={props.className} />;
}

When I inspect my code on Chromium (100.0.4896.127) I see box-shadow: 0px 0px 0px 1px rgb(27 31 36 / 15%); this not seems a RGBA color or a RGB valid color.

And the same if I inspect the code of this old Stackoverflow post, I see box-shadow: 0 0 0 0 rgb(0 0 0 / 70%);

So, whitch is the correct way to use rgba in box-shadow with styled-components?

Solution

  • It's just the way the dev tools displays the syntax. It's the same colour, don't worry.