[dsego]

Why is it harder to work with? It makes it immediately obvious what the visual layout is and what the purpose of the component is and a lot of time all you want to do is have a flex on a component and you don't need other CSS to warrant yet another CSS class. It's the same reason why utility CSS was created (eg <div class="flex">). It also saves you from having to come up with a semantic name in your CSS for every wrapper.

Compare the following:

    <Stack gap={2} direction="row">
       <Box>
         <Avatar />
       </Box>
       <Box>
         <Button />
       </Box>
    </Stack>

    -----

    <MyCustomWrapper>
        <InnerChild>
          <Avatar>
        </InnerChild>
        <InnerChild>
           <Button />
        </InnerChild>
     </MyCustomWrapper>

[iammrpayments]

I think this looks way simpler

  <div className=“flex gap-2”>
   <Button/>
   <Avatar/>
  <\div>

Then just apply the box styles using *: selector or directly in the component