Material UI按钮未显示

huangapple
go评论95阅读模式
英文:

Material UI Button not displayed

问题

以下是您提供的代码的中文翻译部分：

index.js 中的内容：

  1. import React from 'react';
  2. import ReactDOM from 'react-dom/client';
  3. import App from './App';
  5. const root = ReactDOM.createRoot(document.getElementById('root'));
  6. root.render(
  7.   <React.StrictMode>
  8.     <App />
  9.   </React.StrictMode>
  10. );

App.js1 中的内容：

  1. import Button from '@mui/material/Button';
  3. function App() {
  4.   return  <Button variant="contained">Button</Button>
  5. }
  7. export default App;

package.json 中的内容：

  1. {
  2.   "name": "my-app",
  3.   "version": "0.1.0",
  4.   "private": true,
  5.   "dependencies": {
  6.     "@emotion/react": "^11.10.6",
  7.     "@emotion/styled": "^11.10.6",
  8.     "@testing-library/jest-dom": "^5.16.5",
  9.     "@testing-library/react": "^13.4.0",
  10.     "@testing-library/user-event": "^13.5.0",
  11.     "react": "^18.2.0",
  12.     "react-dom": "^18.2.0",
  13.     "react-scripts": "5.0.1",
  14.     "web-vitals": "^2.1.4"
  15.   },
  16.   "scripts": {
  17.     "start": "react-scripts start",
  18.     "build": "react-scripts build",
  19.     "test": "react-scripts test",
  20.     "eject": "react-scripts eject"
  21.   },
  22.   "eslintConfig": {
  23.     "extends": [
  24.       "react-app",
  25.       "react-app/jest"
  26.     ]
  27.   },
  28.   "browserslist": {
  29.     "production": [
  30.       ">0.2%",
  31.       "not dead",
  32.       "not op_mini all"
  33.     ],
  34.     "development": [
  35.       "last 1 chrome version",
  36.       "last 1 firefox version",
  37.       "last 1 safari version"
  38.     ]
  39.   }
  40. }

请问还有其他需要帮助的地方吗？

英文:

Follow is my content of index.js

  1. import React from &#39;react&#39;;
  2. import ReactDOM from &#39;react-dom/client&#39;;
  3. import App from &#39;./App&#39;;
  6. const root = ReactDOM.createRoot(document.getElementById(&#39;root&#39;));
  7. root.render(
  8.   &lt;React.StrictMode&gt;
  9.     &lt;App /&gt;
  10.   &lt;/React.StrictMode&gt;
  11. );

App.js1

  1. import Button from &#39;@mui/material/Button&#39;;
  3. function App() {
  4.   return  &lt;Button variant=&quot;contained&quot;&gt;Button&lt;/Button&gt;
  5. }
  7. export default App;

package.json

  1. {
  2.   &quot;name&quot;: &quot;my-app&quot;,
  3.   &quot;version&quot;: &quot;0.1.0&quot;,
  4.   &quot;private&quot;: true,
  5.   &quot;dependencies&quot;: {
  6.     &quot;@emotion/react&quot;: &quot;^11.10.6&quot;,
  7.     &quot;@emotion/styled&quot;: &quot;^11.10.6&quot;,
  8.     &quot;@testing-library/jest-dom&quot;: &quot;^5.16.5&quot;,
  9.     &quot;@testing-library/react&quot;: &quot;^13.4.0&quot;,
  10.     &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
  11.     &quot;react&quot;: &quot;^18.2.0&quot;,
  12.     &quot;react-dom&quot;: &quot;^18.2.0&quot;,
  13.     &quot;react-scripts&quot;: &quot;5.0.1&quot;,
  14.     &quot;web-vitals&quot;: &quot;^2.1.4&quot;
  15.   },
  16.   &quot;scripts&quot;: {
  17.     &quot;start&quot;: &quot;react-scripts start&quot;,
  18.     &quot;build&quot;: &quot;react-scripts build&quot;,
  19.     &quot;test&quot;: &quot;react-scripts test&quot;,
  20.     &quot;eject&quot;: &quot;react-scripts eject&quot;
  21.   },
  22.   &quot;eslintConfig&quot;: {
  23.     &quot;extends&quot;: [
  24.       &quot;react-app&quot;,
  25.       &quot;react-app/jest&quot;
  26.     ]
  27.   },
  28.   &quot;browserslist&quot;: {
  29.     &quot;production&quot;: [
  30.       &quot;&gt;0.2%&quot;,
  31.       &quot;not dead&quot;,
  32.       &quot;not op_mini all&quot;
  33.     ],
  34.     &quot;development&quot;: [
  35.       &quot;last 1 chrome version&quot;,
  36.       &quot;last 1 firefox version&quot;,
  37.       &quot;last 1 safari version&quot;
  38.     ]
  39.   }
  40. }

And you can see in the following picture, nothing is displayed (supposedly to display a button):
Material UI按钮未显示

How should I solve this?

答案1

得分: 1

你还没有安装 MUI 库，请按照文档进行安装：

npm install @mui/material

英文:

You have not installed the MUI library, follow the document and install this:

npm install @mui/material

答案2

得分: 1

请按照文档安装Material UI。

第一步，请尝试：

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

然后，导入@font

  1. npm install @fontsource/roboto

添加到index.js：

  1. import '@fontsource/roboto/300.css';
  2. import '@fontsource/roboto/400.css';
  3. import '@fontsource/roboto/500.css';
  4. import '@fontsource/roboto/700.css';

如果您想要使用Material UI的图标，请尝试：

  1. npm install @mui/icons-material

希望对您有所帮助。

英文:

Please follow the documentation to install Material UI.

First, try:

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

Then, import @font

  1. npm install @fontsource/roboto

Add to index.js

  1. import &#39;@fontsource/roboto/300.css&#39;;
  2. import &#39;@fontsource/roboto/400.css&#39;;
  3. import &#39;@fontsource/roboto/500.css&#39;;
  4. import &#39;@fontsource/roboto/700.css&#39;;

And if you want to using icon of Material UI, try:

  1. npm install @mui/icons-material

Hope that help

huangapple
  • 本文由 发表于 2023年2月26日 22:17:32
  • 转载请务必保留本文链接：https://go.coder-hub.com/75572596.html
  • material-ui
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定