如何在已集成React的Astro项目中整合MUI组件？

我正在学习Astro，已经启用了React集成，希望在Astro组件中使用MUI的Button、Typography等Material组件。

我的astro.config.js配置如下：

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

// https://astro.build/config
export default defineConfig({
    // Enable React to support React JSX components.
    integrations: [react()],
});

Counter.tsx组件代码：

import { useState } from "react";
import Container from "@mui/material/Container";
import "./Counter.css";
import { Button, Typography } from "@mui/material";

export default function Counter({
  children,
  count: initialCount
}: {
  children: JSX.Element;
  count: number;
}) {
  const [count, setCount] = useState(initialCount);
  const add = () => setCount((i) => i + 1);
  const subtract = () => setCount((i) => i - 1);

  return (
    <Container>
      <div className="counter">
        <button onClick={subtract}>-</button>
        <Typography variant="h6">{count}</Typography>
        <Button variant="contained" color="secondary" onClick={add}>
          +
        </Button>
      </div>
      <div className="counter-message">{children}</div>
    </Container>
  );
}

我在本地尝试使用client:only="react"指令，但Astro的样式仍然具有更高优先级，导致MUI组件样式被覆盖。请问是否存在官方或最佳的整合方案，或者可行的解决办法？还是MUI根本无法与Astro兼容？

提前感谢！

（注：有对应的在线演示示例）

内容的提问来源于stack exchange，提问作者Sara Lufi