Overriding sx props that are not exposed via styled-system props

What is the recommended way to override border props on an extended component, since the border props from styled-system are not available on the Box or Card components.

For example, if I create a component like this:

import { Card as BaseCard } from 'rebass/styled-components'

const Card = React.forwardRef((props, ref) => {
  return (
    <BaseCard
      ref={ref}
      as="section"
      sx={{
        borderRadius: 's',
        boxShadow: 'm',
        p: 3,
        bg: 'primaryColor',
        color: 'primaryText',
      }}
      {...props}
    />
  )
})

How can I override borderRadius when using the component? I would expect to be able to do something like this:

<Card borderRadius="m">A card with a bigger border radius</Card>

But since borderRadius styled-system prop is not available, then maybe I could try this:

<Card sx={{borderRadius: 'm'}}>A card with a bigger border radius</Card>

But this doesn’t work as expected because the sx prop from the base Card component gets completely overridden.

One workaround I have found is to do this:

import { Card as BaseCard } from 'rebass/styled-components'
import merge from 'lodash/merge'

const Card = React.forwardRef(({ sx, ...rest }, ref) => {
  return (
    <BaseCard
      ref={ref}
      as="section"
      {...rest}
      sx={merge(
        {
          borderRadius: 's',
          boxShadow: 'm',
          p: 3,
          bg: 'primaryColor',
          color: 'primaryText',
        },
        sx
      )}
    />
  )
})

Then I can do this with the expected result:

<Card sx={{borderRadius: 'm'}}>A card with a bigger border radius</Card>

But it feels pretty horrible…

Another solution is to use the __css prop that is in rebass, which also frees me up to be able to use the sx prop to apply overrides:

const Card = React.forwardRef(({ sx, ...rest }, ref) => {
  return (
    <BaseCard
      ref={ref}
      as="section"
      {...rest}
      __css={{
        borderRadius: 's',
        boxShadow: 'm',
        p: 3,
        bg: 'primaryColor',
        color: 'primaryText',
      }}
    />
  )
})

But this also feels bad because presumably __css is named with a double underscore because it’s not part of the public interface and you don’t want people using it.

Suggestions…?

[goszczynskip]

@jxnblk Solution with spreading both objects works fine until you work with objects but sx allows also a function. Current types shows errors when you try to merge that way. I’ve skimmed through rebass/styled-system repo to find some helpers for merging styles and failed to find one.

It would be nice to use css from @styled-system/css but right now it accepts only one object. Extending it that it’ll accept array will solve merging problems. It could work the same as in css from @emotion/core. https://emotion.sh/docs/composition

[jxnblk]

@palashkaria the __css API is private because it’s not an ideal solution and it could break with an update, but I would like some public API to support similar functionality. You can use the sx prop like described above for the time being