我正在学习 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
最佳答案
正如 noktasizi#3070 所述,Astro 尚不支持像 MUI 这样的 UI 库(其组件样式依赖于 CSS-in-Javascript)。
关于javascript - 如何在 React Integrated Astro 站点中集成 MUI?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73941829/