Passing down styling should be better

[fverloop]

When using components you often want to override their internal styling. Currently it's possible but cumbersome. They main issues I have with our current setup:

• On a component instance the css prop can't be used because it's lifted to <head/> before it can be used inside the component. The css prop inside the component will be unefined.
• I also need to create a custom interface for components so the css prop is allowed.
• My current solution is to use a c prop, which is nasty and confusing because there are two different ways to add styling to components.

Example:

// Usage
<H1 css={{color: "red"}}>Hello</H1>

// Component
const H1: FramerComponent<{}> = props => {
  console.log(props.css) // undefined

  const style = Style(F.size[5]);
  return <h1 css={[props.css, style]}>{props.children}</h1>;
};

Ideally the css prop would be usable everywhere without these custom workarounds.

[koenbok]

If you write a test, I can make this work easily!

[fverloop]

Done: 284d4314799dea8267541e2d5ca5f5c462091516