how to use props inside props in styled component in react js

Question

I need to change the background color in condition wise ex below:

background-color: ${({bg})=>bg ? `${({theme})=>theme.color}`:#ffffff;

But its not working, can any one please help me with this?

Answer 1

use this way :

background-color: ${({ theme, bg })=> bg ? theme.color : #ffffff ;

you should use string instead of boolean like this :

<div bg='yes'>

background-color: ${({ theme, bg })=> bg === 'yes' ? theme.color : #ffffff