Passing css function into component inside of a Context Provider

[dungle-scrubs]

Hi, I'm trying to pass css into a child of a HoC but get the error:

Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`....

My CSS looks like this:

const THUMBNAILS_WRAPPER = `
    width: 100%;
    padding: .5rem;
  `

And my JSX looks like this:

<div css={PRODUCT_SECTION}>
        <CurrentImageContextProvider>
          {images && images.length > 1 ? (
            <div css={THUMBNAILS_WRAPPER}>
              <ProductGalleryThumbnails
                images={images}
                title={title}
                gatsbyImageProps={gatsbyImageProps}
              />
            </div>
          ) : (
            ''
          )}
        </CurrentImageContextProvider>
</div>

And my context looks like this:

const CurrentImageContext = React.createContext(0);
CurrentImageContext.displayName = 'CurrentImageContext';
const { Provider } = CurrentImageContext;

export function CurrentImageContextProvider({ children }) {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  return (
    <Provider value={[currentImageIndex, setCurrentImageIndex]}>
      {children}
    </Provider>
  );
}

However, it will work if I pass the css function directly into the child like this:

<div css={css`
              width: 100%;
              padding: .5rem;
            `}>

Why is that? And is there a way I can do it the way I'm attempting? I try not to mix my styles into my markup if I can avoid it.

Thanks!

[Andarist]

You can also do this:

const THUMBNAILS_WRAPPER = css`
    width: 100%;
    padding: .5rem;
  `

We could accept strings but by enforcing css to be used with strings we can more easily target those strings with our Babel plugin, Prettier can format those strings properly and you might get improved syntax highlighting in your IDE.

[dungle-scrubs]

Ahh, thanks, that's a little embarrassing! In my mind I thought I was including the "css" before the template literal the entire time and just became blind to it. Thanks