CODEWITHSUNDEEP
javascriptcssreactjscss-selectorsstyled-components
cts
cts

Reputation: 1084

Specific targeting of CSS classes with Styled Components not being rendered - React

I've been struggling with a styling issue for a while, but the basic issue is that I want to style every instance of <StyledButton> differently after the first. To do this, I'm targeting the wrapping element (attributeset-row className) and the remove-btn className (for <StyledButton>) like so:

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

I have discovered the issue is that the CSS styles are not being applied to the components, due to my targeting of classNames - as you can see below I am passing in classNames to the relevant components (and they are showing in the browser), but along with a lot of other what looks to be jargon:

enter image description here

Can anyone explain where I might be going wrong with this in terms of applying specific CSS styles to StyledComponents (usually this type of styling isn't needed) but I need to style all <StyledButton>'s after the first differently.

Here's my code:

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>
  );

Upvotes: 1

Views: 1503

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19109

I would use the adjacent sibling combinator. This will target all .attributeset-rows but the first one.

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

Here's a simple version of this example over at CodeSandbox. https://codesandbox.io/s/serene-swanson-frcb4?file=/src/App.js

Upvotes: 1

Related Questions