Estoy haciendo un botón usando componentes de reacción y estilo. Hice 3 botones en línea y deberían tener margin-left : 1rem entre sí.

así que hice el componente Button.js que obtiene accesorios (tamaño, color) de App.js

El valor de tamaño consta de valores large , medium y small , y si se especifica uno de ellos, se genera un botón en el tamaño apropiado.

Si selecciona uno de los colores definidos en la palette , el valor del color cambia al color que le conviene.

 const palette = { blue: "#228be6", gray: "#adb5bd", pink: "#f06595", };

Dividí estos factores en "sizeStyles" y "colorStyles", respectivamente.

 const sizeStyles = css` ${({size}) => css` height: ${sizes[size].height}; font-size: ${sizes[size].fontSize} `}

 const colorStyles = css` ${({ theme, color }) => { const selected = theme.palette[color]; return css` background: ${selected}; &:hover { background: ${lighten(0.1, selected)}; } &:active { background: ${darken(0.1, selected)}; } `; }} `;

El componente Button representa un botón denominado StyledButton .

 <StyledButton color={color} size={size} {...rest}> {children} </StyledButton>

entonces el problema principal es StyledButton . cuando escribo algunos de los códigos en SytledButton en este orden,

 ${colorStyles} ${sizeStyles} & + & { margin-left: 1rem; }

margin-left:1rem no se aplicó. pero si cambia el orden como este.

 & + & { margin-left: 1rem; } ${colorStyles} ${sizeStyles}

se aplicó. ¿Por qué está pasando esto?

aquí está el código completo de StyledButton por si acaso

 const StyledButton = styled.button` display: inline-flex; align-items: center; outline: none; border: none; border-radius: 4px; color: white; font-weight: bold; cursor: pointer; padding-left: 1rem; padding-right: 1rem; & + & { margin-left: 1rem; } ${colorStyles} ${sizeStyles} `;