'Box' component vs css prop for layout, what to choose?

Question

I'm using styled-system and Emotion now and I can't come to an understanding of which approach is more correct to use.
I have some "Box" component, which handles different props like mx, my, px, py, bg, color, and many others from https://styled-system.com/api/.

Sometimes I have the following situations :
I have some "Select" component, which doesn't have styled-system props. And I have to add some margins (for example) to this Select. I can do this in following ways :

import {Select} from 'Select'

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

Or I can use Emotion's css prop with @styled-system/css and do next :

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

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

For me personally, the css option seems more readable, but I already use the "Box" component in many places of the project and I do not know whether to change their syntax or not.

before :

<Box mx={1}/>

after :

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

Which option in which situation would be more correct?

Answer 1

This is pretty subjective. Your box is not the same as a div. Presumably, you have a border-box rule for the Box component. Let's not get the whole reason for using the box confused. If you just want your select to have all the props of a box, well, it should already have that, assuming your Select definition looks like this

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

export default Select