sx vs individual CSS props

[MuhammadJamaluddin]

So, the API all across Theme UI has this type:

export interface BoxOwnProps extends SpaceProps, ColorProps {
  as?: React.ElementType
  variant?: string
  css?: Interpolation<any>
  sx?: ThemeUIStyleObject
}

I think this is very problematic from an API standpoint... why?

There are two ways you can pass SpaceProps or ColorProps... either individually or inside the sx prop

Why this is a problem?

It leads to very frustrating situations when you try to override these values... how is that?

For example, if you have <Box sx={{ ... }} color="red"> & then the consumer tried to override the color as such:

<Box sx={{ color: 'green' }}

This will never work... you have to remember to pass it as an individual color property...

I suggest we make sx the single source of truth & not allow individual SpaceProps or ColorProps outside sx for a more predictable seamless API

[hasparus]

Hey @MuhammadJamaluddin! I'm super happy you proposed this. I've been feeling we should go this way for a while.