sx prop on custom components not working

I’ve noticed while writing components that the sx prop didn’t work on custom components which i’d built myself, but when i went to use it with other plugin libraries (fontawesome for example) it did work as expected. So am i missing something? I can’t imagine large libraries like FA are doing something special to accept the sx prop.

An example component i’ve made (though this seems to affect everything i’ve written, so i’m curious what’s wrong).

/** @jsx jsx */
import { jsx } from 'theme-ui'

interface PropTypes {
  to: string
  variant?: string
  children: string
}

const Button = ({ to, variant, children }: PropTypes) => (
  <a
    href={to}
    className={`button`}
    sx={{
      px: 3,
      py: 2,
      border: 0,
      borderRadius: 4,
      cursor: 'pointer',
      variant: variant ? `buttons.${variant}` : `buttons.primary`,
    }}
  >
    {children}
  </a>
)

export default Button

<Button to='#' variantbutton='primary'>Button text</Button>

What i’d like to do, as an example

<Button to='#' variantbutton='primary' sx={{ display: 'flex' }}>Button text</Button>

[jxnblk]

You’ll need to pass the className prop through to the underlying HTML element. The sx prop is converted to className with Theme UI’s jsx function

[danspratling]

Okay i think i’ve got a solution which is clean & gives no errors.

Best solution so far

/* imports */

interface PropTypes {
  to: string,
  variant: string,
  sx: object, //we expect a sx prop but never use it below
  className: string, //we expect a className prop but never define one when the component is called
  children: string
}

const Button = (props: PropTypes) => { //props is defined and compared against the interface
  const { to, variant, className, children } = props //then we destructure later, ignore sx because we don't use it
  return (
    <a
      href={to}
      className={className} //merging properly, yay!
      sx={{...}}
    >
      {children}
    </a>
  )
}

<Button to='#' variant='button.primary' sx={{ display: 'flex' }}>Button text</Button>

No duplicated props, and everything is used some way or another.

Going to close as i’m happy with this solution (especially as sx errors on html elements anyway in ts so removing the errors in my own components is 👌)

Thanks all!