我正在学习Astro.我想过在Astro组件中使用MUI的material 组件,如按钮、排版等,因为我已经启用了Reaction集成.
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