Использование props в React со стилизованными компонентами в компонентах

Question

У меня есть компонент React:

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

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

и другой компонент:

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

, и я хочу, чтобы фон моего компонента кнопки был атрибутом «цвета» в другом элемент. Как я могу это сделать? (Все импортировано и экспортировано)

Answer 1

Из того, что я вижу, компоненты Button и StyledButton принимают по крайней мере следующие реквизиты, name и color.

Следовательно, вам нужно будет передать реквизиты в StyledButton компонент:

const Button = ({ color, name }) => (
  <StyledButton color={color}>{name}</StyledButton>
);

Answer 2

Уничтожение name для использования в качестве дочернего элемента / текста кнопки, а остальные переданные реквизиты распространяются на StyledButton.

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