styled-components传函数时::before/::after伪元素不显示问题

一、伪元素显示异常的根源 #

你遇到的问题核心在于动态函数返回的定位值导致伪元素重合或样式失效：

• 当你用函数设置top/left/bottom这些定位属性时，如果两个伪元素的函数返回了完全相同的定位值，后定义的伪元素会被前一个完全覆盖，看起来像是“不显示”；调换代码位置后，原来被覆盖的变成了覆盖者，所以显示情况反转。
• 另外要检查函数逻辑：如果函数依赖组件的props，但没有正确接收或处理props，可能返回undefined或无效的CSS值，导致对应伪元素的定位失效，自然无法显示。
• 换成常量值后，两个伪元素的定位属性明确且不重合，所以都能正常显示。

二、Stack Overflow代码片段无法运行的原因 #

是的，必须引入styled-components才能运行相关代码：

• styled-components是第三方React样式库，需要先通过包管理器（npm/yarn/pnpm）安装它，然后在代码文件中通过import styled from 'styled-components'引入，才能使用它的语法编写样式组件。Stack Overflow的代码片段通常只展示核心逻辑，不会包含安装和引入步骤，直接运行的话环境中没有这个库，自然无法执行。

内容的提问来源于stack exchange，提问作者Philipp