使用 Styled Components 的条件样式

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

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

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

Answer 2

您没有将名称属性传递给 header 组件，应该是：

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

Answer 3

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

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

Answer 4

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

使用 Styled Components 的条件样式

Conditional styling with Styled Components

reactjs

styled-components