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

Question

I'm building a ReactJS site and use styled-components with ThemeProvider. So my background-color or color css codes are like this background-color: ${props => (props.theme.background)}. Now I want to create a CSS pulse animation with box-shadow.

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);

That's working! But I want to use the color from my ThemeProvider so I tried this:

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

And it's not working this way. I googled it but haven't found any solution for my problem. Can you help? How can I use props with rgba in box-shadow?

EDIT: It's working when I use a HEX Code!!! But not rgba and I need rgba!

Why do you need rgba? If it's a set color that's not gonna be changed (assuming yout theme has a fixed set of colors that is) why don't just use the hex equivalent? — Rodius

SALEH SALEH · Accepted Answer · 2017-12-15T18:01:44

In my case, the color function rgba() works perfectly with styled-components. I have prepared a demo that assimilates your current implementation. You can go through this and compare with your current output.

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

1 Answers