i'm making button using react and styled-components. i made 3 buttons in line and they should have margin-left : 1rem each other.

so i made Button.js component which get props(size, color) from App.js.

The size value consists of large, medium, and small values, and if one of them is specified, a button is generated in the appropriate size.

If you select one of the colors defined in palette, the value of the color changes to the color that suits it.

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

I divided these factors into "sizeStyles" and "colorStyles", respectively.

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

The Button component renders a button called StyledButton.

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

so main issue is StyledButton. when I write some of codes in SytledButton this order,

${colorStyles}
${sizeStyles}

  & + & {
    margin-left: 1rem;
  } 

margin-left:1rem didn't apply. but If Changed order like this.

 & + & {
    margin-left: 1rem;
  } 

  ${colorStyles}
  ${sizeStyles}

it applied. Why is this happening?

here's full code of StyledButton just in case

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}

`;