Условное моделирование с использованием стилевых компонентов

Question

Как сделать один стиль условно со стилевыми компонентами?

У меня есть базовый компонент, который принимает опору, но он не работает (возможно, что-то действительно глупое):

import React from 'react';
import styled from 'styled-components';

const Header = styled.h1`
  color: ${props => (props.name === 'john' ? 'red' : 'blue')};
`;

export default ({ name }) => <Header>Hello {name}!</Header>;

Answer 1

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

<Header name={name}>Hello {name}!</Header>

Answer 2

export default ({ name }) => <Header>Hello {name}!</Header>;

В этом случае у Header Component не было заданных вами реквизитов. В React реквизит похож на атрибуты html. Но в вашем коде Hello {name} - это React children, поэтому вы получите значение props.name, равное undefined.

Answer 3

Вы должны передать реквизит компоненту Header:

export default ({ name }) => <Header name={name}>Hello {name}!</Header>;