面试题：Qwik中集成Material UI的基本步骤

Question

请阐述在Qwik项目中集成Material UI的主要步骤，包括安装依赖、引入相关模块等操作。

Answer 1

1. 安装依赖：
   • 在Qwik项目根目录下，使用npm或yarn安装Material - UI及其相关依赖。
   • 使用npm：

     npm install @mui/material @emotion/react @emotion/styled
     

   • 使用yarn：

     yarn add @mui/material @emotion/react @emotion/styled
     

2. 引入相关模块：
   • 在Qwik组件文件中，引入Material - UI组件。例如，要使用Button组件：

     import { Button } from '@mui/material';
     import { component$ } from '@builder.io/qwik';
     
     export default component$(() => {
       return (
         <Button variant="contained">Click me</Button>
       );
     });
     

3. 主题配置（可选但推荐）：
   • 创建一个主题文件，例如theme.js。

   import { createTheme } from '@mui/material/styles';
   
   const theme = createTheme({
     palette: {
       primary: {
         main: '#1976d2'
       }
     }
   });
   
   export default theme;
   

   • 在Qwik应用入口文件（如main.tsx）中，通过ThemeProvider来使用主题。

   import { render } from '@builder.io/qwik';
   import { ThemeProvider } from '@mui/material/styles';
   import theme from './theme';
   import App from './App';
   
   render(() => {
     return (
       <ThemeProvider theme={theme}>
         <App />
       </ThemeProvider>
     );
   });