0

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

有时我有以下情况：
我有一些“选择”组件，它没有样式系统道具。而且我必须为此 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})}

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

4

1 回答 1

0

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

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

export default Select
于 2021-05-03T19:32:05.433 回答