Ad

Using Props In React With Styled Components Across Components

I have a React component:

const StyledButton = styled.button`
    border: none;
    background: ${props => props.color};
    color: white;
    &:focus {
        outline: none;
    }
`;

const Button = (props) => {
    return (
        <StyledButton>{props.name}</StyledButton>
    )
};

and another component:

const NoteWindow = (props) => {
    return (
        <StyledNoteWindow className="NoteWindow">
            <StyledForm action="#" className="form">
                <StyledInput type="text" name="title" id="title" autoComplete="off" placeholder="Title" style={{fontSize: 60, fontWeight: 700}}/>
                <StyledInput type="text" name="content" id="content" autoComplete="off" placeholder="Content.." style={{fontSize: 20}}/>
            </StyledForm>
            <Button name="Discard" color="red"/>
            <Button name="Save" color="blue"/>
        </StyledNoteWindow>
    )
}

and I want the background of my button component to be the "color" attribute in the other element. How can I do that? (Everything is imported and exported)

Ad

Answer

From what I can see, Button and StyledButton components accepts at least the following props, name and color.

Therefore, you will need to pass the props down to the StyledButton component:

const Button = ({ color, name }) => (
  <StyledButton color={color}>{name}</StyledButton>
);
Ad
source: stackoverflow.com
Ad