Fix support for mui

[matthewp]

Changes

• Adds configuration for mui
• Closes 🐛 BUG: Inability to use MUI with a React app #4079

[changeset-bot]

🦋 Changeset detected

Latest commit: 5090af1

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[natemoo-re]

Nice!

[LuckyArdhika]

how to use?

Changes

• Adds configuration for mui
• Closes 🐛 BUG: Inability to use MUI with a React app #4079

How to use?

[antonymott]

This is huge! Astro with React+MUI. Thanks so much! @LuckyArd110 : the way I used MUI was pretty much standard, added it to a React component, then consumed that component in a .astro page. Can't say I've tried lots of mui styling, but I can confirm the following works:
pnpm add @mui/material @mui/x-data-grid @mui/system. I haven't deployed, but an MUI data-grid works well in dev and production mode. From what I gather, the Astro core team worked to get MUI working but won't announce it until the next release. Having an excellent quality grid component styling (like MUI) is very helpful, especially as I can confirm that neither React AG-grid or the new Solid AG-grid work in prod mode with Astro 1.6.10

[krnbr]

@antonymott

were you able to use the theme provider of mui with astro/react?

[antonymott]

@krnbr

Yes, I got mui more or less to work in a .jsx component that itself I import into a .astro page and then use importedMuiJsxComponent client:only='react' in the html below the frontmatter. I use SSR btw.

But I found by trial and error that not all mui components work in dev mode, and even fewer compile without error in production mode usually because of some dependency that vite doesn't agree with.

So you have to try out the mui components you wish to use in dev and prod mode until you see if the ones you are interested in work. If it helps, I got these ones to work:

import { Fragment, useRef, useState, useEffect } from 'react' (<= not mui, but to give you context)
import TextField from '@mui/material/TextField'
import Dialog from '@mui/material/Dialog'
import DialogTitle from '@mui/material/DialogTitle'
import DialogContent from '@mui/material/DialogContent'
import DialogContentText from '@mui/material/DialogContentText'
import DialogActions from '@mui/material/DialogActions'
import CircularProgress from '@mui/material/CircularProgress'
import parse from 'autosuggest-highlight/parse'
import match from 'autosuggest-highlight/match'
import Button from '@mui/material/Button'
import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'

[krnbr]

@antonymott if the custom theme aslo works? did you try that? that uses emotion cache etc. which I believe has to stay only on UI.

[antonymott]

@krnbr haven't tried that. I just looked back at my comment yesterday and the markdown somehow hid the most important part which is the template directive
client:only='react', which I fixed. This is mentioned in the template directive part of Astro.build docs here and is necessary to stop the server from rendering it before the browser which causes all sorts of issues.