未呈现样式组件的特定目标-反应 [英] Specific targeting of CSS classes with Styled Components not being rendered - React

问题描述

我一直在为样式问题而苦苦挣扎，但基本的问题是，我希望在第一个实例之后以不同的方式设置<StyledButton>的每个实例的样式。为此，我以包装元素(attributeset-row类名称)和remove-btn类名称(对于<StyledButton&>)为目标，如下所示：

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

我发现问题在于，由于我的目标是类名称，所以没有将CSS样式应用于组件--正如您在下面看到的那样，我正在将类名称传递给相关组件(它们显示在浏览器中)，但同时还有许多其他看起来像行话的东西：

谁能解释一下，在将特定的CSS样式应用到StyledComponent(通常不需要这种类型的样式)方面，我可能出了什么问题，但我需要以不同的方式设置第一个之后的所有StyledButton>的样式。

以下是我的代码：

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

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

  return (
    <div className={className}>
      {objects.map((enteredObject, index) => (
        <RepeatableAttributeSetContextProvider
          form={form}
          object={enteredObject}
          key={`${enteredObject.key}-${enteredObject.repeatIndex}`}
        >
          <StyledHorizontalAttributesTable className="attributeset-row">
            {enteredObject.attributeCollection.questions
              .filter(filterRepeatAttributes)
              .map((attribute) => (
                <Fragment key={attribute.key}>
                  {renderAttribute(enteredObject, attribute, formLayout)}
                </Fragment>
              ))}
            <StyledButton
              className="remove-btn"
              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>
  );

推荐答案

我会使用相邻的同级组合符。这将以除第一个之外的所有.attributeset-row为目标。

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

在CodeSandbox上有这个例子的一个简单版本。https://codesandbox.io/s/serene-swanson-frcb4?file=/src/App.js

这篇关于未呈现样式组件的特定目标-反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！