emotion use css prop with custom components

Question

In my application I have a component that I want to style with the css prop from outside.

function Component({css}:{css?: React.CSSProperties}) {
  // some stuff going on here
  return (
    <div
      css={{
        color: blue,
        ...css
      }}
    >
       // some stuff going on here
    </div>
  )
}

The background is as follows: I want to use Component in different scenarios where I have to style the container based on the surrounding layout. E.g. flex, grid or in combination with some components I have to add different margins.

Now instead of introducing many props for all possible scenarios, I want to be able to style the container from outside the component.

E.g. usages of the component could be:

function Layout() {
  return (
    // some other components
    <Component css={{margin: 12}}/>
    // some other components
  )
}

or

import {css} from "@emotion/react"

const style = css({margin: 12})

function Layout() {
  return (
    // some other components
    <Component css={style}/>
    // some other components
  )
}

or

import {css} from "@emotion/react"

const style1 = css({margin: 12})
const style2 = css({color: 'red'})

function Layout() {
  return (
    // some other components
    <Component css={[style1, style2]}/>
    // some other components
  )
}

I have the following problems:

If I use css as the prop name (as in the above example) the style is not applied. If I change the name of the prop to e.g. newCss it works as expected
React.CSSProperties is not the right prop type to handle all the possibilities of emotions css prop.
How can I merge the different css prop possibilities (object, list) with the css prop from Component?

Jacob · Accepted Answer · 2022-05-04 13:58:58Z

15

In fact, we don't need to use the extra props. As Ben Laniado mentioned, the official documentation states

Any component or element that accepts a className prop can also use the css prop.

https://emotion.sh/docs/css-prop#use-the-css-prop

So what we need is accepting className and css as props and add className to the component. (We don't need css to the component but need it for types)

type ComponentProps = {
  css?: SerializedStyles;
  className?: string;
};
const Component: VFC<ComponentProps> = ({ className }) => {
  return (
    <div css={{ color: blue }} className={className}>
      hello world
    </div>
  );
};
export default function App() {
  return (
    <div className="App">
      <Component css={{ margin: 12 }} />
    </div>
  );
}

This is the full working example.
https://codesandbox.io/s/react-component-accepting-emotion-css-prop-wskbh?file=/src/App.tsx

edited May 4, 2022 at 13:58

Jacob

1,86714 silver badges29 bronze badges

answered Jan 20, 2022 at 8:32

Satoshi Onoda

1611 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Martin Omacht Over a year ago

You don't actually have to implement the css prop in Component, you only have to implement the className prop.

Satoshi Onoda Over a year ago

@MartinOmacht thanks, you are right. I updated the examples.

Mravec · Accepted Answer · 2021-07-07 16:01:12Z

1

The right way of achieving this functionality is modifying the component to accept extra props. This way the css prop passed into the component would be merged with the one within the component.

function Component({prop1, prop2, propN, ...props}) {
  // some stuff going on here
  return (
    <div
      css={{
        color: blue,
      }}
      {...props}
    >
       // some stuff going on here
    </div>
  )
}

Now you can use additional styles on your component and it will be rendered properly.

function Layout() {
  return (
    // some other components
    <Component css={{marginTop: "1em"}}/>
    // some other components
  )
}

The side effect of this solution that any additional prop would be passed directly to the HTML element inside the component that takes {...props}.

edited Jul 7, 2021 at 16:01

Mravec

3222 silver badges12 bronze badges

answered Mar 25, 2021 at 16:18

dekross

1041 silver badge7 bronze badges

2 Comments

Skyy2010 Over a year ago

thanks! I am surprised the solution is that simple :)

Ben Laniado Over a year ago

Actually, if you want to be more accurate. You component will need to implement className and apply it where you want your CSS-IN-JS style. emotion.sh/docs/css-prop#use-the-css-prop

Collectives™ on Stack Overflow

emotion use css prop with custom components

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related