styled-components 内容条件不起作用

Question

我正在使用 styled-components 并尝试添加一个简单的条件，如下所示：

const Wrapper = styled.section`
  padding: 4em;
  
  ::after {
   content: ${1 ? 'a' : 'b'};
  }
`;

但它根本没有做任何事情。
在不存在after检查 DOM 时。

也试过这个：

...
content: ${1 && 'a'};
...

但是，仍然没有发生任何事情。

如何使用条件并返回content css 规则所需的字符串？

Answer 1

您在 after seudo 选择器和""之前缺少&来包装内容值。 应该：

const Wrapper = styled.section`
  padding: 4em;
  
  &::after {
    content: "${1 ? 'a' : 'b'}";
  }
`;