Margins not working due to *:not(style)~*:not(style)

An unknown style is being applied to elements, so far I can only narrow this down to when using vStack, but I imagine its there in others too. *:not(style)~*:not(style)

Will not get the margins applied from this

    <VStack>
      <Link href="jamie" m="10rem">
        jamie
      </Link>
      <Text variant="caps3" m="10rem">
        Hello World //no margin left
      </Text>
    </VStack>

https://codesandbox.io/s/no-margin-chakra-b56vs

[TimKolberger]

Your request is technically valid - the margins are getting overridden. But from a design system perspective the current behaviour is correct. The Stack component is an approach to solve the issue “which component owns the whitespace”. It helps distributing space around nested components.

The space around nested components is not their responsibility - they should not interfere with it. This increases the reusability of the component in different contexts.

We have two tools at hand to apply whitespace: margin and padding. We have to choose wisely when to use which tool. My mindset when deciding to use margin or padding is:

• margin is applied hierarchically from top to bottom (or outside -> inside)
• padding is applied hierarchically from bottom to top (or inside -> outside)

E.g. when building a grid, the grid itself distributes space between its nested components with margin. Each nested component can manage its space with padding , but it should never interfere with the spacing from the hierarchy level above.

In your specific use cases, play it through which component owns which space. When the ownership is clear, the Space component will be a blessing to work with and there are no “spacing hickups” in your applications.

IMO the implementation of the Stack component needs no change, because there is no bug if you follow the mentioned design principles to ease your development workflow.

Further references:

• A blog entry by Max Stoiber about Margins
• A great talk from Mark Dalgleish about how to approach reusable styled components

[segunadebayo]

From a usage standpoint, we don’t recommend adding custom margins to the children of HStack, VStack or Stack.

If you ever need to, then maybe you don’t need to use them and reach for Flex or use the shouldWrapChildren prop.

@with-heart, setting certain values to 0 is needed to get the responsive spacing to work.

Closing this because it isn’t a bug.