如果可能的话，如何将MUI与Qwik框架一起使用？

Question

我尝试了 Qwik 框架，它看起来很像 Reactjs 并且使用 jsx。突然，我想知道 MUI 等 Reactjs 库是否可以与 Qwik 框架一起使用。

我尝试了这段代码：

import { component$ } from "@builder.io/qwik";
import Add from "@mui/icons-material/Add";
import IconButton from "@mui/material/IconButton";

const AddToCartButton = component$(() => {
  return (
    <IconButton>
      <Add />
    </IconButton>
  );
});

export default AddToCartButton;

但我得到了这个错误：

QWIK ERROR Code(25): Invalid JSXNode type. It must be either a function or a string. Found: {
  '$$typeof': Symbol(react.memo),
  type: {
    '$$typeof': Symbol(react.forward_ref),
    render: [Function: Component] { displayName: 'AddIcon', muiName: 'SvgIcon' }
  },
  compare: null
} Error: Code(25): Invalid JSXNode type. It must be either a function or a string. Found:
    at logError (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4515:58)
    at logErrorAndStop (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4521:21)
    at qError (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4585:16)
    at Proxy.jsx (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:605:23)
    at AddToCartButton_component_4S0nJgnxzBU (/src/addtocartbutton_component_4s0njgnxzbu.js:11:55)
    at useInvoke (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:149:30)
    at E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4676:32
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async renderSSR (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:5280:9)
    at async Proxy.renderToStream (E:\qwik\flower\node_modules\@builder.io\qwik\server.cjs:582:3)
    at async file:///E:/qwik/flower/node_modules/@builder.io/qwik/optimizer.mjs:1776:30
QWIK ERROR Code(25): Invalid JSXNode type. It must be either a function or a string. Found: Error: Code(25): Invalid JSXNode type. It must be either a function or a string. Found:
    at logError (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4515:58)
    at logErrorAndStop (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4521:21)
    at qError (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4585:16)
    at Proxy.jsx (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:605:23)
    at AddToCartButton_component_4S0nJgnxzBU (/src/addtocartbutton_component_4s0njgnxzbu.js:11:55)
    at useInvoke (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:149:30)
    at E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4676:32
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async renderSSR (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:5280:9)
    at async Proxy.renderToStream (E:\qwik\flower\node_modules\@builder.io\qwik\server.cjs:582:3)
    at async file:///E:/qwik/flower/node_modules/@builder.io/qwik/optimizer.mjs:1776:30
not rendered

Answer 1

本例中的JSX是 Qwik 的模板语言，但底层不同。它是相似的，所以你可以更容易地从 React 过渡，如他们的文档中所述。

Qwik 对于 React 开发人员来说很熟悉，可以用来构建任何类型的网站或应用程序。

Qwik 为您需要安装和包装组件的 React 组件提供了一些适配器。

npm i -D @builder.io/qwik-react

然后用法应该类似于他们的 repo 中的示例。

/** @jsxImportSource react */

import { qwikify$ } from '@builder.io/qwik-react';
import { Button } from '@mui/material';

export const App = qwikify$(() => {
  return (
    <>
      <Button variant="contained">Hola</Button>
    </>
  );
});