为什么在 emotion-js 组件的单独实例之间共享道具？

Question

1. 为什么 emotion-js 似乎共享来自单独组件实例的道具？

<Button isDisabled={'true'} />
<Button />

const Button = styled.button`
  background-color: ${props => props.isDisabled !== 'true' ? 'green' : 'grey'};
`;

export default (props) => {
    return (<Button>Hello</Button>);
}

期望：第一个<Button/>是灰色的。第二个是绿色。

现实：<Button/>的两个实例都是灰色的。

---

此外，这个让我很困惑，直到我从文档中注意到这个片段：

By default, Emotion passes all props to custom components and only props that are valid html attributes for string tags.

2. 为什么只传递 有效字符串标签的道具？ bool 的以下用法似乎是一个有效的用例。

<Button isDisabled={true} /> 

Answer 1

不共享道具。你只需要正确地传递它们。 有两种方法可以实现您想要的效果，要么使用适当的字符串，要么使用布尔值：

字符串版本：

const Button = styled('button')`
  background-color: ${props => props.isDisabled !== 'true' ? 'green' : 'grey'};
`;

用法：

<Button isDisabled="true">grey</Button>
<Button>green</Button>

或布尔值（在这种情况下可能更可取）：

const Button = styled('button')`
  background-color: ${props => props.isDisabled ? 'grey' : 'green'};
`;

用法：

<Button isDisabled>Grey</Button>
<Button>green</Button>