Theme UI in Astro

[pseudo-bot]

Theme UI is not working in Astro. Astro does not compile themeUI syntax. Is there any work around?

[hasparus]

Are you using the sx prop in React .tsx files or .astro files?

[pseudo-bot]

I am using the sx prop in jsx files: Example code

/** @jsx jsx */
/** @jsxRuntime classic */
import { jsx, ThemeProvider } from 'theme-ui';
import theme from '@utils/theme.js';

const Footer = () => (
  <ThemeProvider theme={theme}>
    <footer
      sx={{
        width: '100%',
        mt: '2rem',
        mb: '1rem',
      }}
    >
      <p sx={{ textAlign: 'center', color: 'red' }}>
        
      </p>
    </footer>
  </ThemeProvider>
);

[hasparus]

Okay, I spent some time fiddling with it, and I noticed that @astrojs/react does not accept configuring @jsxImportSource.
I used pnpm patch to swap it out in getRenderer, but the next problem is that Astro doesn't prerender it Emotion styles, so you need client:load and you still get FOUC.

withastro/astro#4432

If I were you I'd try using https://github.com/mayank99/ecsstatic, Vanilla Extract or Tailwind.
I'm sorry I couldn't help you more, but it turns out that's a bit of a not-trivial build-time work.