用于布局的“框”组件与 css 道具，该选择什么？

如何解决用于布局的“框”组件与 css 道具，该选择什么？

我现在正在使用 styled-system 和 Emotion，但我无法理解哪种方法更适合使用。
我有一些“盒子”组件，它处理不同的道具，如 mx、my、px、py、bg、color 以及来自 https://styled-system.com/api/ 的许多其他道具。

有时我会遇到以下情况：
我有一些“选择”组件，它没有样式系统道具。我必须为这个 Select 添加一些边距（例如）。我可以通过以下方式做到这一点：

import {Select} from 'Select'

<Box 
  as={Select}
  my={32}
  ml={10}
/>

或者我可以将 Emotion 的 css 属性与 @styled-system/css 一起使用，然后执行下一步：

/** @jsxImportSource @emotion/react */
import {Select} from 'Select'
import css from '@styled-system/css'

<Select
  css={css({
    my: 32,ml: 10
  )}
/>

就我个人而言，css选项似乎更具可读性，但我已经在项目的很多地方使用了“Box”组件，不知道是否要更改它们的语法。

之前：

<Box mx={1}/>

之后：

div css={css({mx=1})}

在哪种情况下哪个选项更正确？

解决方法

这是非常主观的。您的盒子与 div 不同。据推测，您有 Box 组件的边框规则。让我们不要混淆使用盒子的全部原因。如果你只是想让你的选择拥有一个盒子的所有道具，那么它应该已经拥有了，假设你的 Select 定义看起来像这样

const Select = ({ onClick,...styleProps }) => <Box {...styleProps}><p>select me</p></Box> 

export default Select