【chakra-ui】謎のマージンが降りてくる

謎のマージンが降りてくる

事象

Stackの子要素にマージンを当てたいが・・・

export default function App() {
  return (
    <VStack bg="grey">
      <Box h={50} w={100} bg="pink" marginLeft={10}>
        A
      </Box>
      <Box h={50} w={100} bg="pink" marginLeft={10}>
        B
      </Box>
      <Box h={50} w={100} bg="pink" marginLeft={10}>
        C
      </Box>
    </VStack>
  );
}

謎のcssがあたってくるので、想定通りのマージンを当てることができない

*:not(style)~*:not(style)というスタイルが打ち消しのスタイルを持っており、それを当てない場合はコード通りのスタイルがあたる。

これはChakraのIssueにも取り上げられています。

ここでのコメントにある通り、Stackコンポーネントの目的上、正しい挙動のようです。

しかし、設計システムの観点からは、現在の動作は正しいです。このStackコンポーネントは、「どのコンポーネントが空白を所有しているか」という問題を解決するためのアプローチです。
https://github.com/chakra-ui/chakra-ui/issues/2578#issuecomment-753468114

Stackは子要素のスペースを管理している（責務がある）ので、Stackに設定されたspacingが優先される。

    <VStack>
      <A />
      <B />
      <C marginTop="4" />
      <D />
    </VStack>

ではなく

    <VStack>
      <A />
      <VStack spacing="4">
        <B />
        <C />
      </VStack>
      <D />
    </VStack>

が正しい。

これらを踏まえると、個人的にはStackのspacingで混乱しそうなコンポーネント（≒階層が深いコンポーネント）はStackを使わずに、margin/paddingで実装していくほうが混乱を招かないので、Boxで階層構造を作り、階層が1つの見通しのよいコンポーネントでStackのspacingを使用していくのが直感的かなと感じています。