英文:
Material UI Button not displayed
问题
以下是您提供的代码的中文翻译部分：
index.js 中的内容：
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
App.js1 中的内容：
import Button from '@mui/material/Button';
function App() {
return <Button variant="contained">Button</Button>
}
export default App;
package.json 中的内容：
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
请问还有其他需要帮助的地方吗？
英文:
Follow is my content of index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
App.js1
import Button from '@mui/material/Button';
function App() {
return <Button variant="contained">Button</Button>
}
export default App;
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
And you can see in the following picture, nothing is displayed (supposedly to display a button):
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。
第一步，请尝试：
npm install @mui/material @emotion/react @emotion/styled
然后，导入@font
npm install @fontsource/roboto
添加到index.js：
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
如果您想要使用Material UI的图标，请尝试：
npm install @mui/icons-material
希望对您有所帮助。
英文:
Please follow the documentation to install Material UI.
First, try:
npm install @mui/material @emotion/react @emotion/styled
Then, import @font
npm install @fontsource/roboto
Add to index.js
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
And if you want to using icon of Material UI, try:
npm install @mui/icons-material
Hope that help
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论