He estado luchando con un problema de estilo durante un tiempo, pero el problema básico es que quiero aplicar un estilo diferente a cada instancia de <StyledButton> después de la primera. Para hacer esto, estoy apuntando al elemento de ajuste (atributeset attributeset-row className) y remove-btn className (para <StyledButton >) así:

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

Descubrí que el problema es que los estilos CSS no se aplican a los componentes, debido a mi orientación de classNames; como puede ver a continuación, estoy pasando classNames a los componentes relevantes (y se muestran en el navegador), pero junto con muchos otros lo que parece ser una jerga:

¿Alguien puede explicar dónde podría estar yendo mal con esto en términos de aplicar estilos CSS específicos a StyledComponents (por lo general, este tipo de estilo no es necesario) pero necesito diseñar todos los < StyledButton> después del primero de manera diferente.

Aquí está mi código:

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