React中Styled Components定向CSS类样式未渲染问题咨询

核心错误：CSS选择器语法使用错误 #

你编写的样式规则& .attributeset-row:not(:first-child) .remove-btn中，&与.attributeset-row之间的空格代表后代选择器，含义是匹配StyledHorizontalAttributesTable组件内部的.attributeset-row类元素，但你实际是将.attributeset-row类直接绑定在StyledHorizontalAttributesTable组件自身，因此规则无法匹配到任何元素，样式不生效。
你观察到的styled-components自动生成的哈希类名是框架的正常机制，不会影响自定义类的规则匹配，无需额外处理。

方案1：快速修正选择器语法 #

删除&与.attributeset-row之间的空格，代表匹配同时携带styled-components生成类和自定义.attributeset-row类的当前元素：

const StyledHorizontalAttributesTable = styled(StyledHorizontalAttributes)`
  &.attributeset-row:not(:first-child) .remove-btn {
    background-color: lightblue;
  }
`;

方案2：使用styled-components原生组件选择器（更推荐） #

不需要手动绑定自定义类名，直接用styled组件作为选择器，避免类名拼写错误，代码更简洁：

const StyledButton = styled(Button)`
  margin-top: 14px;
`;

// 直接用组件作为选择器，无需自定义类
const StyledHorizontalAttributesTable = styled(StyledHorizontalAttributes)`
  &:not(:first-child) ${StyledButton} {
    background-color: lightblue;
  }
`;

// 渲染时移除自定义类绑定
return (
  <div className={className}>
    {objects.map((enteredObject, index) => (
      <RepeatableAttributeSetContextProvider
        form={form}
        object={enteredObject}
        key={`${enteredObject.key}-${enteredObject.repeatIndex}`}
      >
        <StyledHorizontalAttributesTable>
          {enteredObject.attributeCollection.questions
            .filter(filterRepeatAttributes)
            .map((attribute) => (
              <Fragment key={attribute.key}>
                {renderAttribute(enteredObject, attribute, formLayout)}
              </Fragment>
            ))}
          <StyledButton
            type="link"
            buttonStyle="LINK"
            name="delete"
            dataId={`delete-${enteredObject.key}-${index}`}
            isOberonIcon
            isIconButton
            icon="bin"
            onClick={() => onRemove(enteredObject)}
          >
            <Message id="Form.Button.Remove" defaultMessage="Remove" />
          </StyledButton>
        </StyledHorizontalAttributesTable>
      </RepeatableAttributeSetContextProvider>
    ))}
  </div>
);

如果修改后样式仍被覆盖，可检查StyledButton是否内置了background相关样式，可先通过临时加!important验证匹配规则是否生效，再调整样式权重即可。

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