Unable to render props in a page from Styled Components object

Question

I'm having troubles controlling the appearance of my button from different pages and components.

button.js

const Button = styled.button`
    background: ${props => props.lightbg ? 'linear-gradient(to right, #9969fb, #7833fc)' : 'linear-gradient(to right, #4813AC, #6239B2)'};
    box-shadow: ${props => props.lightborder ? "inset 0px 0px 0px 1px #6d49b5;" :  "inset 0px 0px 0px 1px #9168dd80;"};  
`

export default function ButtonPurple(props) {
    return (
        <Button>{props.btnText}</Button>
    )
}

In index.js I'm unable to change the button background, I can input both true and false but what is rendered is always the second value. Seems that the component accepts the prop only in button.js and not in other pages. Any explanation would be really appreciated. Thank you.

<Button lightbg={false} btnText="Discover Now"/>

Answer 1

You need to forward the properties to your styled button from the ButtonPurple component:

export default function ButtonPurple(props) {
    return (
        <Button lightbg={props.lightbg}>{props.btnText}</Button>
    )
}