带有样式组件的条件样式

【问题标题】：Conditional styling with Styled Components带有样式组件的条件样式
【发布时间】：2018-10-16 09:56:00
【问题描述】：

样式组件如何有条件地使用样式？

我有一个接受道具的基本组件，但它似乎不起作用（可能真的很傻）：

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>;

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

您必须将 prop 传递给 Header 组件：

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

【讨论】：

【解决方案2】：

您没有将名称道具传递给标题组件，应该是：

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

【讨论】：

【解决方案3】：

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

在这种情况下，Header Component 没有您定义的任何道具。在React 中，props 就像 html 属性一样。但是在您的代码中，Hello {name} 是 React 子级，因此您得到 props.name 的值是 undefined。

【讨论】：

【解决方案4】：

你需要传递道具。最后一行代码需要编辑为export default ({ name }) => <Header {...props}>Hello {name}!</Header>;

【讨论】：