Как правильно скомбинировать react material и styled-system?

Question

[eugenedrvnk]

Делаю админку на базе react-material в совокупности со styled-system. Есть компоненты в которых содержится довольно много материаловских компонентов, TextField, Select и тд. Сначала для стилизации всяких отступов я просто оборачивал их в компонент Box (кастомный компонент, который включает функционал styled-system). Но потом понял что при большом количестве компонентов всё выглядит прям как-то слишко громоздко

<Box>
  <Box mb={10}>
    <Box mr={2}><TextField/></Box>
    <Box mr={2}><TextField/></Box>
    <Box mr={2}><TextField/></Box>
  </Box>
  
  <Box>
    <Box mr={2}><Select/></Box>
    <Box mr={2}><Select/></Box>
    <Box mr={2}><Select/></Box>
  </Box>
</Box>

Это лишь небольшая часть компонента. Я думаю, что в этой ситуации было бы хорошо создать некую обёртку вокруг компонентов TextField/Select, которая добавит функции styled-system к компонентам. А потом использовать их как :

<Box>
  <Box mb={10}>
    <TextField mr={2}/>
    <TextField mr={2}/>
    <TextField mr={2}/>
  </Box>
  
  <Box>
    <Select mr={2}/>
    <Select mr={2}/>
    <Select mr={2}/>
  </Box>
</Box>

Но тогда я понимаю, что в react-material компонентов-то весьма много, и каков будет правильный путь? Переопределить каждый из них, чтобы иметь какой-то похожий стиль пропсов? Или какой способ может быть более удобным? Делать это лишь для часто используемых компонентов?