如何将 CSS 添加到“不是第一个”呈现的样式化组件

Posted 2023-03-05

【中文标题】如何将 CSS 添加到“不是第一个”呈现的样式化组件

【英文标题】：How to add CSS to "not the first" rendered Styled Component

【发布时间】：2021-11-02 00:18:03

【问题描述】：

我有一个样式非常独特的组件。该组件基本上呈现水平行（带有 2 个输入和一个图标：StyledButton 和 Message（删除））。

该组件允许用户添加/删除任意数量的行，但我想直接定位不是第一个的StyledButton 的任何实例。我已经尝试了通常建议的答案，但问题可能是每次都渲染整个组件而 CSS 无法达到那么远。

任何建议都会很棒。

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

  return (
    <div className=className>
      objects.map((enteredObject, index) => (
        <RepeatableAttributeSetContextProvider
          form=form
          object=enteredObject
          key=`$enteredObject.key-$enteredObject.repeatIndex`
        >
          <StyledHorizontalAttributes className="attributeset-row">
            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>
          </StyledHorizontalAttributes>
        </RepeatableAttributeSetContextProvider>
      ))
    </div>
  );

【参考方案1】：

const StyledHorizontalAttributesTable = styled(StyledHorizontalAttributes)`
  & + & 
    .remove-btn 
      background-color: lightblue;
    
  
`;

感谢这个答案：Specific targeting of CSS classes with Styled Components not being rendered - React

【参考方案2】：

:not(:first-child) 应该可以工作。

.attributeset-row .button:not(:first-child) 
  background: lightblue;

<div class = "attributeset-row">
  <div class="row">One</div>
  <div class="row">Two</div>
  <div class="button">Three</div>
</div>

【讨论】：

感谢您的回复，不确定是不是因为这是 StyledComponents 而不是普通的 CSS/html - 但它似乎没有起到作用。

渲染出来的 HTML 是什么样子的？

很多事情发生了，但是：StyledContainer > StyledHorizo​​ntalAttributes > Row = Row = Button

难以在 cmets 上格式化，但两个 Rows 与 Button 位于同一级别。哪些是 StyledHorizo​​ntalAttributes 的子代，它是 StyledContainer 的子代

抱歉 - 当 不是 的第一个子元素时，您是否要特别设置它的样式？