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

Question

我正在构建一个 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！

Answer 1

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

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

ReactJS: Using rgba in box-shadow with styled-components props not working

reactjs

styled-components