Emotion 11: How do compose style overrides passed in as a prop to component (typescript).

[eikonomega]

Hello Friends,
So, I'm running into a little trouble with how to appropriately type things after upgrading to Emotion 11.

Basically, I've got a simple little component that allows for style overrides to passed in as a prop called containerStyles.

/** @jsx jsx */
import { jsx, CSSObject } from '@emotion/react';
import { Dispatch, ReactNode, SetStateAction } from 'react';
import useDimensions from 'react-cool-dimensions';

import '../assets/css/typography.css';

type Props = {
  title: string;
  text?: string;
  children?: ReactNode;
  containerStyles?: CSSObject; // WHAT SHOULD THIS BE??
  onHeightChange?: Dispatch<SetStateAction<number>> | (() => void);
  onWidthChange?: Dispatch<SetStateAction<number>> | (() => void);
};

export default function VisualizationHeader({
  title,
  text,
  children,
  containerStyles = {},
  onHeightChange = () => null,
  onWidthChange = () => null,
}: Props) {
  const { ref } = useDimensions<HTMLDivElement>({
    onResize: ({ width, height }) => {
      onHeightChange(height + 50);
      onWidthChange(width);
    },
  });

  return (
    <div
      ref={ref}
      // Is this how I should be composing them??
      css={[
        {
          paddingTop: '25px',
          paddingBottom: '25px',
          paddingRight: '25px',
        },
        containerStyles,
      ]}
    >
      <h1>{title}</h1>
      {text && (
        <p
          css={{
            marginTop: 0,
            paddingRight: 25,
          }}
        >
          {text}
        </p>
      )}
      {children}
    </div>
  );
}

Previously, I was able to type this as CSSObject from the library, but now this throws an typescript error. 😭

So, 2 questions:

• How should I type the containerStyles prop in Emotion 11?
• Is the way I'm composing these additional styles with the default ones correct when I use the css prop in the div element that is returned by the function?

[Andarist]

How should I type the containerStyles prop in Emotion 11?

The type for this should be a subset of the types allowed for the Interpolation type:

emotion/packages/serialize/types/index.d.ts

Line 60 in 2f9ce55

export type Interpolation<Props> =

. Most likely InterpolationPrimitive would do the trick:

emotion/packages/serialize/types/index.d.ts

Line 20 in 2f9ce55

export type InterpolationPrimitive =

Is the way I'm composing these additional styles with the default ones correct when I use the css prop in the div element that is returned by the function?

LGTM