使用Styled-Components复现原生HTML/CSS动态类名选择器效果

核心问题原因 #

你之前的写法不生效是因为&符号在Styled Components中指向当前组件生成的随机类名，你写的&.style-123 .component-a语义是「当前组件自身同时带有style-123类，且它的后代有component-a类」，和你需要的「祖先元素带style-123类时，当前component-a元素生效」逻辑完全相反。

可行实现方案 #

直接通过props把动态类名的数字部分传入Styled组件，拼接为祖先选择器即可，完全满足你所有要求：

1. 保留component-a类名在HTML元素上
2. style-xxx类名无需出现在ComponentA元素上
3. 支持类名动态变更、CSS属性通过props动态传递

代码实现 #

1. 定义Styled组件

import styled from 'styled-components'

const ComponentA = styled.div`
  /* 拼接祖先选择器：父级有对应style-xxx类时匹配当前组件 */
  ${props => `.style-${props.dynamicStyleId} &.component-a`} {
    margin-left: -2%;
    /* 支持继续通过props传入动态样式值 */
    color: ${props => props.customColor || '#000'};
  }

  /* 原有component-a的固有样式正常写即可 */
  &.component-a {
    font-size: 16px;
    line-height: 1.5;
  }
`

2. 组件调用

父组件中维护动态的styleId状态，直接传给ComponentA即可：

import { useState } from 'react'

function ParentComponent() {
  // 动态styleId，可通过接口、交互等逻辑更新
  const [styleId, setStyleId] = useState(123)

  return (
    <div className={`name-whatever style-${styleId} another-classname`}>
      <div>
        <ComponentA 
          className="component-a"
          dynamicStyleId={styleId}
          customColor="red"
        >
          HELLO
        </ComponentA>
      </div>
    </div>
  )
}

最终效果 #

最终DevTools中生成的生效样式和你要求的完全一致：

.style-123 .sc-xxxxxx.component-a {
    margin-left: -2%;
    color: red;
}

其中sc-xxxxxx是Styled Components生成的随机类名，不会影响你原有逻辑，HTML元素上也会保留component-a类名。

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