Passing props to a component that was inherited from another

[franklinjavier]

Hi guys... I'm trying to pass the color prop from a component to another (that was inherited), but apparently the prop is not reaching its destination. Has anyone ever experienced this?

I created a repo to reproduce the problema I'm facing https://codesandbox.io/s/flora-forked-c2l50?file=/src/App.tsx

thanks

---

Potentially related issue
#507

[megawebmaster]

Everything works as you might have expected it @franklinjavier - you just didn't create color variant nor you're passing styles to the component below.

The simplest way to fix it is like this:

// App.tsx
export default function App() {
  return (
    <Provider>
      <Heading css={{color: "$brand-1"}}>Heading 1</Heading>
      <Heading as="h2" css={{color: "$brand-2"}}>
        Heading 2
      </Heading>
  )
}