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)