如何用Styled Components实现条件样式？自定义组件为何不生效？

嘿，这个问题其实超简单！你写的styled组件<Header>根本没拿到你传的name props～

看你现在的代码，导出的组件里虽然接收了name参数，但在渲染<Header>的时候，并没有把这个name传递给它。所以styled组件里的${props => (props.name === 'john' ? 'red' : 'blue')}这段逻辑，因为props.name是undefined，只会一直渲染蓝色。

只需要改一行代码，把name props传给<Header>就搞定了：

import React from 'react';
import styled from 'styled-components';
const Header = styled.h1`
  color: ${props => (props.name === 'john' ? 'red' : 'blue')};
`;
// 这里给Header加上name={name}
export default ({ name }) => <Header name={name}>Hello {name}!</Header>;

如果之后有多个props需要传递，也可以用解构的方式一次性传过去，更简洁：

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

这样当你传入name="john"的时候，标题就会变成红色，其他名字则是蓝色啦～

内容的提问来源于stack exchange，提问作者skube