ReactJS：在 box-shadow 中使用 rgba 和 styled-components 道具不起作用答案

【问题标题】：ReactJS: Using rgba in box-shadow with styled-components props not workingReactJS：在 box-shadow 中使用 rgba 和 styled-components 道具不起作用
【发布时间】：2018-05-29 14:26:47
【问题描述】：

我正在构建一个 ReactJS 网站并使用 styled-components 和 ThemeProvider。所以我的背景颜色或颜色 css 代码是这样的background-color: ${props => (props.theme.background)}。现在我想用 box-shadow 创建一个 CSS 脉冲动画。

const pulse = keyframes
  to {
    box-shadow: 0 0 0 45px rgba(0,0,0,0);
  }


// My component
box-shadow: 0 0 0 0 rgba(0,0,0,0.7);
animation: ${pulse} 1.25s infinite cubic-bezier(0.66, 0, 0, 1);

这行得通！但我想使用 ThemeProvider 中的颜色，所以我尝试了这个：

// shadow from ThemeProvider = "rgba(0,0,0,0.7)";
box-shadow: 0 0 0 0 ${props => (props.theme.shadow)};

而且它不是这样工作的。我用谷歌搜索了它，但没有找到任何解决我的问题的方法。你能帮我吗？如何在 box-shadow 中使用带有 rgba 的道具？

编辑：当我使用 HEX 代码时它可以工作！！！但不是 rgba，我需要 rgba！

【问题讨论】：

为什么需要 rgba？如果它是一个不会改变的颜色（假设你的主题有一组固定的颜色）为什么不只使用十六进制等效？

标签： reactjs styled-components

【解决方案1】：

在我的例子中，颜色函数rgba() 与styled-components 完美配合。我准备了一个demo 来吸收你当前的实现。您可以通过此操作并与您当前的输出进行比较。

【讨论】：

酷。不知道你可以这样做。谢谢！ :)