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

我正在建造一个ReactJS地点和使用样式组件 with 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 中将 props 与 rgba 一起使用？

EDIT:当我使用十六进制代码时它可以工作！但不是 rgba，我需要 rgba！

就我而言，颜色函数rgba()完美配合styled-components。我准备了一个demo https://codesandbox.io/s/l2vvl67l9q吸收您当前的实现。您可以检查一下并与当前的输出进行比较。