Passing CSS props to functional component

[carldegs]

Hi there!

I am trying to pass the css object prop to a functional component, but it's always returning undefined. What's the correct way to do this? Thanks!

Here's an example. Let's say I have a component Component which expects a css prop that will be added to it's div's css prop.

const Component = ({ css, children }) => <div css={{ 'background': 'blue', ...css}}>{children}</div>

But when I pass a prop to it in the parent component, I am getting undefined instead.

const Page = () => {
  return (
    <div>
      <Component css={{ color: 'white' }}>Test</Component>
    </div>
  );
};

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[carldegs]

Sorry about that. I'll take note of that next time.

[srmagura]

Hey @carldegs, the css prop is "magic" so it won't get passed down to Component like a normal prop. You can review this section of our documentation.

This is what you want:

const Component = ({ className, children }) => <div css={{ 'background': 'blue' }} className={className}>{children}</div>

className will include the Emotion-generated class from the css prop.

[carldegs]

Thanks a lot @srmagura!