如果可能的话，如何在Qwik框架中使用MUI？

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的模板语言，但底层语言不同。它是类似的，所以您有一个更容易的转变，从反应，如他们的文档。

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

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

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

然后它的用法应该类似于他们的回购中的例子。

/** @jsxImportSource react */

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

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

Answer 2

这条线有点老了，但也许有人像我一样偶然发现了它。我在使用UI组件库时遇到了同样的问题，并通过以下步骤解决了这个问题。

• 将qwikReact添加到vite.config文件中： 从“vite”导入{ defineConfig }； 从“@builder.io/qwik/优化器”导入{ qwikVite }； 从“@builder.io/ qwikCity /vite”导入{qwikCity}； 从“@builder.io/qwik-react”导入{ qwikReact }； 从“vite-tsconfig-path”导入tsconfigPaths； 导出默认的defineConfig() => {返回{ plugins: qwikCity()，qwikVite()，qwikReact()，tsconfigPaths()，预览：{“缓存-控制”："public，max-age=600"，}，}；})；
• qwikify()必须在单独的文件只使用和/** @jsxImportSource react */ 正如乔纳森指出的中使用。

请注意，在Qwik中，react组件将不会被以相同的方式对待。正如文档中所述，它应该是现有项目的迁移/测试工具，其中应在“广岛”中引入react组件。