将道具传递给样式组件选择器

Question

我有一个样式组件，它根据属性（活动）获得一些额外的 styles。

该组件看起来类似于：

import styled from 'styled-components';

const Button = styled.button`
  color: black;

  ${props => props.active ? `color: red;` : ''}
`;

在组件测试中，我需要 select 活动按钮，它（显然）在执行以下操作时不起作用：

document.querySelector(Button)

因为这针对所有 Button 组件，无论是否处于活动状态。

我阅读了 styled-components 文档并在谷歌上搜索了很多。 但是我一直无法找到将特定道具传递给样式化组件选择器的方法。 我期望类似于以下内容（不起作用）

document.querySelector(Button({ active: true }))

有什么办法可以做到这一点，或者更确切地说，您如何 select 具有特定道具的样式化组件？

Answer 1

我想我找到了一个解决方案，这可能是使用样式组件时的“正确”方式。

我没有通过按钮组件中的道具定义活动样式，而是创建了另一个扩展按钮的样式。 这当然迫使我为活动按钮使用另一个组件，而不仅仅是设置活动属性。

然而，它并没有太多额外的工作，而且非常容易测试。 所以我决定用这种方式 go 。

const Button = styled.button`
  color: black;
`;

const ActiveButton = styled(Button)`
  color: red;
`;

document.querySelector(ActiveButton);

Answer 2

正确的语法是这样的：

const Button = styled.button`
  color: black;
  color: ${props => props.active ? 'red' : ''};
`;