javascript - 如何在 React Integrated Astro 站点中集成 MUI？

Question

我正在学习 Astro。我考虑在 Astro 组件中使用 MUI 的 Material 组件，例如 Button、Typography 等，因为我已经启用了 React 集成。

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 与 Astro 集成的解决方法，或者只是 MUI 不能与 Astro 一起使用？

提前致谢

快速概览的 CodeSandBox 链接:https://codesandbox.io/s/cranky-ride-3yw946?file=/src/components/Counter.tsx:0-777

Answer 1

正如 noktasizi#3070 所述，Astro 尚不支持像 MUI 这样的 UI 库(其组件样式依赖于 CSS-in-Javascript)。

可以关注https://github.com/withastro/astro/issues/4432了解更多信息。