在带有样式组件的盒子阴影中使用 rgba 不起作用

Question

我有这个代码：

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

当我在 Chromium (100.0.4896.127) 上检查我的代码时，我看到 box-shadow: 0px 0px 0px 1px rgb(27 31 36 / 15%); 这似乎不是 RGBA 颜色或 RGB 有效颜色。

同样，如果我检查旧 Whosebug post 的代码，我会看到 box-shadow: 0 0 0 0 rgb(0 0 0 / 70%);

那么，在带样式组件的框阴影中使用 rgba 的正确方法是什么？

Answer 1

这就是开发工具显示语法的方式。一样的颜色，不用担心。

在带有样式组件的盒子阴影中使用 rgba 不起作用

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

reactjs

styled-components