Theme-UI and Next.js 11 both have Image Components

[weisisheng]

I am a noob at theme-ui and have tried to wrap the Next.js next/image component around a template component but am failing miserably.

import React from 'react';
//import Im from 'next/image';
import { Image as Img } from 'theme-ui';

export default function Image({ src, ...rest }) {
return <Img src={src} {...rest} />;
}

I hope to make use of Next.js image optimization and static asset hosting through the /public folder. Would appreciate any tips or tricks. Best, V.

[lachlanjc]

Great question! This is a really frustrating one since Next's Image component doesn't play nice with literally any styling solution I've found. For image styles, using Next's built-in objectFit & objectPosition props is definitely the way to go. For wrapping styles, what I typically do is wrap the Next Image with a Theme UI Box, sometimes using a child selector inside sx on the Box works too (img: { borderRadius: 'card' } etc).