import MenuIcon from 'material-ui-icons/Menu';
ΠΏΡΠΈΡΠΈΠ½Ρ
ΠΠΎΠ΄ΡΠ»Ρ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Π½: Π½Π΅ ΡΠ΄Π°Π΅ΡΡΡ ΡΠ°Π·ΡΠ΅ΡΠΈΡΡ Β«material-ui-icons/MenuΒ»
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ ΡΠΎΡΠ½ΡΠΉ ΠΊΠΎΠ΄ ΠΈΠ· ΠΏΡΠΈΠΌΠ΅ΡΠ°: https://github.com/mui-org/material-ui/blob/v1-beta/docs/src/pages/demos/app-bar/ButtonAppBar.js
ΠΎ, ΡΡΠΎ Π½Π΅ ΡΠ°ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΏΠ°ΠΊΠ΅ΡΠ° material-ui: npm install --save material-ui-icons
ΠΠ»Ρ Π²ΡΠ΅Ρ
, ΠΊΡΠΎ ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΡΡ Ρ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ: npm install @material-ui/icons
ΠΠ΅ΡΠΎΡΡΠ½ΠΎ, Π² ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΎΠ± ΡΡΡΠ°ΡΠ΅Π²Π°Π½ΠΈΠΈ Π² material-ui-icons
. ΠΠ° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΎΠ½ΠΈ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½Ρ, Π½ΠΎ Π΅ΡΠ»ΠΈ Google ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ Π²ΡΠΏΡΡΡΠΈΡ Π½ΠΎΠ²ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ, Π±ΡΠ΄Π΅Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ @material-ui/icons
.
ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ @material-ui.
ΠΠΎΡΡΠΎΠΌΡ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π½Π°ΠΏΠΈΡΠΈΡΠ΅ Π² ΡΠ²ΠΎΠ΅ΠΌ ΡΠ΅ΡΠΌΠΈΠ½Π°Π»Π΅
npm install @material-ui/core
npm install @material-ui/icons
Π ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΡΡΡΠΈΡΠ΅ Β«npm startΒ»
ΠΡΡΡ ΡΠ°ΠΊΠ°Ρ ΠΆΠ΅ ΡΠΏΠ°ΠΊΠΎΠ²ΠΊΠ° Π΄Π»Ρ ΠΏΡΡΠΆΠΈ?
ΠΠ°ΠΆΠ΄ΡΠΉ ΠΏΠ°ΠΊΠ΅Ρ Π΄Π»Ρ npm Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π΄Π»Ρ yarn (Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠ°Π·Π½ΡΠ΅ ΡΠ΅Π΅ΡΡΡΡ, Π½ΠΎ Ρ ΠΏΠΎΠ΄ΠΎΠ·ΡΠ΅Π²Π°Ρ, ΡΡΠΎ ΠΊ Π²Π°ΠΌ ΡΡΠΎ Π½Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ).
Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ @eps1lon ... Π£ ΠΌΠ΅Π½Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ»Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΠΏΡΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ .. ΠΏΠΎ ΡΡΠΎΠΉ ΠΏΡΠΈΡΠΈΠ½Π΅ Ρ Π½Π΅
Π΅ΡΡΡ ΠΈΠ΄Π΅ΠΈ ΠΎΠ± ΡΡΠΎΠΉ ΠΎΡΠΈΠ±ΠΊΠ΅
ΠΠΎΠ΄ΡΠ»Ρ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Π½: Π½Π΅ ΡΠ΄Π°Π΅ΡΡΡ ΡΠ°Π·ΡΠ΅ΡΠΈΡΡ Β«@material-ui/core/GridΒ» Π² Β«E:\Material Ui\firstapp\srcΒ»
:(
@atuljustano ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ΅ΠΌΡ ΠΈ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½.
@atuljustano ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π½Π΅ Π½Π°Π΄ΠΎ. ΠΡ Π²ΡΠΏΡΡΠΊΠ°Π΅ΠΌ GitHub ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄Π»Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ ΠΈ Π·Π°ΠΏΡΠΎΡΠΎΠ² ΡΡΠ½ΠΊΡΠΈΠΉ. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ StackOverflow ΠΈΠ»ΠΈ Spectre.chat. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠ΅Π³ StackOverflow ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Β«material-uiΒ», ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΏΠΎΠΌΠ΅ΡΠΊΠΈ ΡΠ²ΠΎΠΈΡ Π²ΠΎΠΏΡΠΎΡΠΎΠ². Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ!
ΠΡΠΈΠ²Π΅Ρ, Ρ ΠΏΠΎΠ»ΡΡΠ°Ρ ....node_modules/@material-ui/icons"' has no exported member 'MenuIcon'.
Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ @material-ui/icons
Ρ ΠΌΠ΅Π½Ρ ΡΠ°ΠΊΠ°Ρ ΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»
Π΄Π»Ρ ΠΈΠΊΠΎΠ½
npm ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ @material-ui/icons
ΠΈ Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ
ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ²
npm ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ @material-ui/ΡΠ΄ΡΠΎ
ΠΈ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΊ
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ AppBar ΠΈΠ· '@material-ui/core/AppBar';
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ SearchIcon ΠΈΠ· '@material-ui/icons/Search';
ΠΡΠ»ΠΎ Π±Ρ Π½Π΅ΠΏΠ»ΠΎΡ ΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΠ½Π΅Π΅.
@catonmat Π ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π·Π½Π°ΡΠΊΠΎΠ² ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² ΡΠΏΠΎΠΌΠΈΠ½Π°Π΅ΡΡΡ ΠΈΠΌΡ ΠΏΠ°ΠΊΠ΅ΡΠ°. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ . ΠΠ°ΠΆΠ΄ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π·Π½Π°ΡΠΊΠΈ, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΈΠΌΠΏΠΎΡΡ, ΠΈ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ Π·Π½Π°ΡΠΊΠ° Π΅ΡΡΡ ΠΊΠΎΠΏΠΈΡΡΠ΅ΠΌΡΠΉ ΠΈΠΌΠΏΠΎΡΡ:
Π§ΡΠΎ, ΠΏΠΎ Π²Π°ΡΠ΅ΠΌΡ ΠΌΠ½Π΅Π½ΠΈΡ, ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΡΠ½ΡΠΌ?
ΠΡΠΎ ΡΡΠ°Π±ΠΎΡΠ°Π»ΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ, ΡΠΏΠ°ΡΠΈΠ±ΠΎ
ΠΡΡΡ ΡΠ°ΠΊΠ°Ρ ΠΆΠ΅ ΡΠΏΠ°ΠΊΠΎΠ²ΠΊΠ° Π΄Π»Ρ ΠΏΡΡΠΆΠΈ?
ΠΡΡΠΆΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΎΡ ΠΆΠ΅ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ, ΡΡΠΎ ΠΈ NPM. ΠΡΠ°ΠΊ, Π½Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΡΠ°Π·Π½ΠΈΡΡ Π² ΠΏΠ°ΠΊΠ΅ΡΠ°Ρ NPM/Yarn.
Π― ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΡΡ Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, ΠΏΠΎΠΏΡΡΠ°Π»ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠΎΠΊ Π² vscode, Π½ΠΎ ΡΡΠΎ Π½Π΅ ΡΡΠ°Π±ΠΎΡΠ°Π»ΠΎ. ΠΠΊΠ°Π·Π°Π»ΠΎΡΡ, ΠΌΠ½Π΅ ΠΏΡΠΈΡΠ»ΠΎΡΡ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ: import DeleteIcon from '@material-ui/icons/Delete';
ΠΡΠ°ΠΊ, Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ DeleteIcon
ΠΈ Delete
β ΡΡΠΎ Π΄Π²Π° ΡΠ°Π·Π½ΡΡ
ΠΈΠΌΠ΅Π½ΠΈ.
@adisher ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΊΠ°ΠΊ Delete
Π΅ΡΠ»ΠΈ Ρ
ΠΎΡΠΈΡΠ΅, Π½ΠΎ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ DeleteIcon
Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ½ΡΡΠ½Π΅Π΅, ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅.
ΠΠ·ΠΌΠ΅Π½ΡΡΡ
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ MenuIcon ΠΈΠ· '@material-ui/icons/Menu';
ΠΊ:
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ΅Π½Ρ ΠΈΠ· '@material-ui/icons/Menu';
Π£ ΠΌΠ΅Π½Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ»Π° ΡΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Ρ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°Π» Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ. Ρ ΠΏΡΡΠ°Π»ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ
import { MenuIcon } from '@material-ui/icons/Menu'
ΠΠΎ ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ Π½Π°
import MenuIcon from '@material-ui/icons/Menu'
ΠΠ»Ρ Π²ΡΠ΅Ρ , ΠΊΡΠΎ ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΡΡ Ρ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ:
npm install @material-ui/icons
ΠΠ΅Π»Π°Π΅Ρ. ΠΠ΅Ρ. ΠΠΎΠΌΠΎΡΡ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ VS-ΠΊΠΎΠ΄Π°
Π£ ΠΌΠ΅Π½Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ ΠΈ Icons, ΠΈ Core.
SearchIcon Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΡ ΠΎΡΠΈΠ±ΠΊΡ:
**ΠΠ΅ ΡΠ΄Π°Π»ΠΎΡΡ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°ΡΡ
ΠΠΎΠ΄ΡΠ»Ρ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Π½: Β«@material-ui/icons/SearchΒ» Π² [ΠΡΡΡ ΠΊ ΡΠ°ΠΉΠ»Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ°]
@ ./src/Header.js 14:14-50**
ΠΡΠΎ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΏΠΎ ΠΈΠΌΠΏΠΎΡΡΡ:
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ SearchIcon ΠΈΠ· "@material-ui/icons/Search";
HTML:
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
"@material-ui/core": "^4.11.0",
"material-ui-icons": "^1.0.0-beta.36",
ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ @material-ui.
ΠΠΎΡΡΠΎΠΌΡ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π½Π°ΠΏΠΈΡΠΈΡΠ΅ Π² ΡΠ²ΠΎΠ΅ΠΌ ΡΠ΅ΡΠΌΠΈΠ½Π°Π»Π΅npm install @material-ui/core npm install @material-ui/icons
Π ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΡΡΡΠΈΡΠ΅ Β«npm startΒ»
ΠΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ!
ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ @material-ui.
ΠΠΎΡΡΠΎΠΌΡ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π½Π°ΠΏΠΈΡΠΈΡΠ΅ Π² ΡΠ²ΠΎΠ΅ΠΌ ΡΠ΅ΡΠΌΠΈΠ½Π°Π»Π΅npm install @material-ui/core npm install @material-ui/icons
Π ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΡΡΡΠΈΡΠ΅ Β«npm startΒ»
ΠΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ!
ΠΠ°, Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ», ΡΡΠΎ ΡΡΠΎΡ ΠΏΠ°ΠΊΠ΅Ρ, ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π² Π΄ΡΡΠ³ΠΎΠΉ ΡΠ΅ΠΌΠ΅, Π½Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΌΠΎΠ΅ΠΉ ΡΠ΅Π»ΠΈ:
"material-ui-icons": "^1.0.0-beta.36",
Π― ΠΏΠ΅ΡΠ΅ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ», ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π²Π°Ρ ΠΏΠΎΠ΄Ρ ΠΎΠ΄, ΠΈ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ», ΡΡΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠ΅ΡΠ΅Π½Π°. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ, ΠΡΠΏΠ°Π½!
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΠ»Ρ Π²ΡΠ΅Ρ , ΠΊΡΠΎ ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΡΡ Ρ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ:
npm install @material-ui/icons
https://www.npmjs.com/package/@material-ui/icons