使用styled-components为id含active的AccordionSection标签设绿色样式失效问题

我的实现代码 #

创建AccordionSection组件：

<AccordionSection
        defaultOpen={activePackage}
        headingLevel="h3"
        id={
          activePackage
            ? `active-${packageObj.type}-${key.toString()}`
            : `${packageObj.type}-${key.toString()}`
        }
        label={label}
        key={`${key.toString()}-${packageObj.type}`}
      >

用样式化的Wrapper包裹：

<Wrapper spaceStackEnd="s">{content}</Wrapper>;

尝试编写的样式（未生效）：

const Wrapper = styled(Accordion)`
    span > {
      &:first-child {
        ${(properties) =>
          properties.id?.startsWith('active') &&
          css`
            color: green;
          `};
      }
    }
  `;

注：label对应的DOM元素是span标签

问题原因 #

1. props获取错误：你在Wrapper样式里访问的properties.id是Wrapper组件自身的props，并非内部AccordionSection的id，根本拿不到目标元素的id值，导致条件判断永远不生效。
2. CSS选择器语法错误：span > { &:first-child } 是无效的写法，正确的子选择器需要明确层级关系，比如span:first-child或父元素 > span。

解决方法 #

方法一：使用CSS属性选择器直接定位目标元素

直接通过[id^="active"]选中所有id以active开头的AccordionSection，再定位其内部的span标签：

const Wrapper = styled(Accordion)`
  /* 选中id以active开头的元素内部的所有span */
  [id^="active"] span {
    color: green;
  }

  /* 如果span是目标元素的直接子元素，用子选择器更精准 */
  [id^="active"] > span {
    color: green;
  }
`;

方法二：给激活状态的AccordionSection添加专属className

如果AccordionSection组件支持传递className属性，直接给激活项加类名后写样式：

1. 修改AccordionSection的渲染：

<AccordionSection
        defaultOpen={activePackage}
        headingLevel="h3"
        id={
          activePackage
            ? `active-${packageObj.type}-${key.toString()}`
            : `${packageObj.type}-${key.toString()}`
        }
        className={activePackage ? 'active-section' : ''}
        label={label}
        key={`${key.toString()}-${packageObj.type}`}
      >

2. 编写Wrapper样式：

const Wrapper = styled(Accordion)`
  .active-section span {
    color: green;
  }
`;

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