將道具傳遞給樣式組件選擇器

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' : ''};
`;