ΠΡΠΎΡ RFC ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Material-UI Π² v5.
TL: DR;
ΠΠ°ΠΊΠΎΠΉ Π±Ρ Π΄Π²ΠΈΠΆΠΎΠΊ ΠΌΡ Π½ΠΈ Π²ΡΠ±ΡΠ°Π»ΠΈ, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ°ΠΊΡΠΎΡΡ:
@material-ui/styles
ΠΈΠΌΠ΅Π΅Ρ ΡΠ°ΡΡΠΈΡΠ½ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΡΠ°ΡΡΠΈ.ΠΡΠ»ΠΎ Π±Ρ Π½Π΅ΠΏΠ»ΠΎΡ ΠΎ, Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ ΠΌΠΎΠ³ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
ΠΠΎΡ ΡΠ΅ΡΡΡ Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ (ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π² Material-UI v4 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡ Ρ ΠΎΡΠΎΡΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ):
PR Π΄Π»Ρ ΡΠΏΡΠ°Π²ΠΊΠΈ: https://github.com/mnajdova/react-native-web/pull/1
ΠΡΠ½ΠΎΠ²ΡΠ²Π°ΡΡΡ Π½Π° ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, Ρ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΊΠ»ΡΡΠΈΡΡ: JSS (Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π·Π°Π²Π΅ΡΠ½ΡΡΡΠΉ Π² @ material-ui / styles), styletron ΠΈ fela. ΠΡΠΎ ΠΎΡΡΠ°Π²ΠΈΡ Π½Π°Ρ Ρ:
Π‘ΡΠ΄Ρ ΠΏΠΎ ΠΎΡΠΊΡΡΡΡΠΌ Π²ΠΎΠΏΡΠΎΡΠ°ΠΌ, ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ ΠΡΡΠΎΠ΄ΠΈΡΠ° Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΡ: https://github.com/Khan/aphrodite/issues/141
ΡΡΠΎ, Π½Π° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄, ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΊΠ»ΡΡΠΈΡΡ ΠΈ ΡΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΠ· Π½Π°ΡΠΈΡ
Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ², ΠΎΡΡΠ°Π²ΠΈΠ² Π½Π°ΠΌ:
Π₯ΠΎΡΡ styled-components
ΠΈ emotion
- ΠΎΠ±Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΠΎΠΏΡΠ»ΡΡΠ½Ρ, react-styletron
Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠΈΠ»ΡΠ½ΠΎ ΠΎΡΡΡΠ°Π΅Ρ: ΠΎΠΊΠΎΠ»ΠΎ 12500 Π·Π°Π³ΡΡΠ·ΠΎΠΊ Π² Π½Π΅Π΄Π΅Π»Ρ (ΡΡΠΎ, Π½Π° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄, Π²Π΅ΡΠΊΠ°Ρ ΠΏΡΠΈΡΠΈΠ½Π°. ΠΏΠΎΡΠ΅ΠΌΡ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΡΡΡΠ°Π½ΠΈΡΡ Π΅Π³ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ, Π΅ΡΠ»ΠΈ ΠΌΡ ΡΠ΅ΡΠΈΠΌ ΠΏΠΎΠΉΡΠΈ Ρ ΡΡΠΈΠΌ, ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Ρ ΡΠ½ΠΎΠ²Π° Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ Π΄Π²Π° ΡΠ°Π·Π½ΡΡ
ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌΠ° ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π² ΡΠ²ΠΎΠΈΡ
ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ
).
ΠΠΎΡ ΡΠΏΠΈΡΠΎΠΊ, ΡΠ°Π½ΠΆΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΏΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ Π΅ΠΆΠ΅Π½Π΅Π΄Π΅Π»ΡΠ½ΡΡ Π·Π°Π³ΡΡΠ·ΠΎΠΊ Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ:
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ±ΠΎΡΠ½ΠΈΠΊ ΡΠ°ΡΡΠΊΠ°Π·ΠΎΠ² Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΌΠΎΡΠΈΠΉ.
ΠΡΠΈΠΌΠ΅ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ΅Π°Π½ΡΠΎΠ² Π² SimilarWeb Π² ΠΌΠ΅ΡΡΡ:
Π‘ΠΎΠ³Π»Π°ΡΠ½ΠΎ ΠΎΠΏΡΠΎΡΡ, 53,8% ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΡΠΈΠ»ΠΈ Material-UI (JSS), ΡΡΠΎ Π½Π΅ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ Π΄Π²ΠΈΠΆΠΎΠΊ, ΠΈΡΡ ΠΎΠ΄ΡΡΠΈΠΉ ΠΎΡ Material-UI. ΠΠ΄Π½Π°ΠΊΠΎ ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ 20,4% ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠΌ ΡΠΈΡΠ»ΠΎΠΌ, ΡΡΠΈΡΡΠ²Π°Ρ, ΡΡΠΎ Ρ Π½Π°Ρ Π½Π΅Ρ ΠΏΡΡΠΌΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ. Π‘ΠΎΠ³Π»Π°ΡΠ½ΠΎ ΠΎΠΏΡΠΎΡΡ, ΡΠΌΠΎΡΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΎΠΊΠΎΠ»ΠΎ 1,9% ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ².
ΠΠΌΠ΅Ρ ΡΡΠΈ ΡΠΈΡΠ»Π°, ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΠ»ΡΡΡΠΈΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΡΠ°ΠΊ ΡΡΠΎ ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ.
ΠΠ°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΌΡ ΡΠ΅ΡΠΈΠΌ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄Π²ΠΈΠΆΠΊΠΎΠ², Π½Π°ΠΌ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΎΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π² Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡΡ .
styled
API, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Ρ Π½ΠΈΡ
Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ-ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠΈ, Π΅ΡΠ»ΠΈ ΠΈΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ.ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠΏΡΡΠ°ΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠ°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ CSS-in-JS, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ² Π΄Π»Ρ Π½ΠΈΡ Π½Π°ΡΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π°Π΄Π°ΠΏΡΠ΅ΡΡ. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π΅ΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ, ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Ρ Π½Π°Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄ΡΠ±Π»ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠ°Π±ΠΎΡΠ° Π½Π°Π΄ ΡΡΠΈΠ»ΡΠΌΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ (ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, jss ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ ΡΠΎ ΡΡΠΈΠ»ΡΠΌΠΈ-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ / ΡΠΌΠΎΡΠΈΡΠΌΠΈ). ΠΡ Π±ΡΠ΄Π΅ΠΌ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠ΅ΠΌΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΡ Π²ΡΠ±Π΅ΡΠ΅ΠΌ.
ΠΠ΅Π½Π΅Π΅ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΡ
ΠΎΠ΄ΠΈΡΡ ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ styled
, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π»ΡΠ΄ΠΈ ΠΌΠΎΠ³ΡΡ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Π²Π΅Π±-ΠΏΠ°ΠΊΠ΅ΡΠ°, ΡΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ - (ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ).
Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΠΊΠ»Π°ΡΡΡ ΠΈ ΠΊΠ°ΠΊ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π½Π° Π½ΠΈΡ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ, Ρ Ρ ΠΎΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΡΠ°Π²Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Ρ Π½Π°Ρ Π΅ΡΡΡ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ, ΠΈ ΡΠΎ, ΠΊΠ°ΠΊ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΅ΡΠ΅Π½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π°.
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π²ΠΎΠ·ΡΠΌΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Slider. ΠΠΎΡ ΠΊΠ°ΠΊ ΡΠ΅ΠΉΡΠ°Ρ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ DOM:
ΠΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠ»Π°ΡΡΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΎ ΠΎΠΏΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΡΠ΅ΠΌΠ°Π½ΡΠΈΠΊΡ, ΠΈ Π»ΡΠ΄ΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°.
Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΡΠΌΠΎΡΠΈΠΈ, ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈΠ»ΠΈ Π»ΡΠ±Π°Ρ Π΄ΡΡΠ³Π°Ρ ΠΏΠΎΠ΄ΠΎΠ±Π½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΡΠΎΠ·Π΄Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ Ρ Π΅Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΠΌΠ΅Π½ΠΈ ΠΊΠ»Π°ΡΡΠ°. Π§ΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΈ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΡΡ ΠΆΠ΅ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠ°ΡΠ³Π΅ΡΠΈΠ½Π³Π°, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊΠ»Π°ΡΡΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ²ΠΎΠΉΡΡΠ².
ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π»ΠΎ Π±Ρ, ΡΡΠΎ ΠΏΠΎΠΌΠΈΠΌΠΎ ΠΊΠ»Π°ΡΡΠΎΠ², ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠΌΠΎΡΠΈΡΠΌΠΈ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΊΠ»Π°ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ Π½Π°Ρ Π±ΡΠ»ΠΈ ΡΠ°Π½Π΅Π΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ MuiSlider-root
& MuiSlider-colorPrimary
, Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½Π°Ρ ΡΠ°Π·Π½ΠΈΡΠ° Π±ΡΠ΄Π΅Ρ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΡΡΠΈ ΠΊΠ»Π°ΡΡΡ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ², Π° Π½Π΅ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ ΠΊΠ°ΠΊ ΠΊΡΡΡΠΎΠΊ - useSliderClasses
ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΡ Π²ΡΠ±Π΅ΡΠ΅ΠΌ, ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ styled
API, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΠΎΠ±ΠΎΠΈΠΌΠΈ ΠΈΠ· Π½ΠΈΡ
. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π½Π°ΠΌ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ ΡΠΏΡΠΎΡΡΠΈΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ
+ Π½Π΅ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² (Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ ΠΏΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΠ°ΠΌΠΈ webpack, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ preact).
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π»ΠΈ Π΄Π²Π° Π²Π°ΡΠΈΠ°Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ Π½Π°Ρ Π±ΡΠ»ΠΈ, ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π½Π°ΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ ΡΠΌΠΎΡΠΈΡΠΌΠΈ . ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ:
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ, ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΌΠΎΡΠΈΠΈ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π±Π΅Π· ΡΡΠΈΠ»ΠΈΠΉ.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° cx + css ΠΎΡ ΡΠΌΠΎΡΠΈΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π΅ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ ΡΡΠΈΠ»Ρ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Π½Π΅ Ρ ΠΎΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠΈ.
ΠΡΠ΅ΡΡΠΈΠΆΠ½ΠΎΡΡΡ @ryancogswell Π·Π° Π±ΠΎΠ»Π΅Π΅ Π³Π»ΡΠ±ΠΎΠΊΠΎΠ΅ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΡΠ΅ΠΌΡ. ΠΠΎΠΊΠ° ΠΌΡ Π½Π΅ Π½Π°ΡΠ»ΠΈ Π² ΠΊΠΎΠ΄Π΅ @emotion Π½ΠΈΡΠ΅Π³ΠΎ, ΡΡΠΎ ΠΌΠΎΠ³Π»ΠΎ Π±Ρ Π²ΡΠ·Π²Π°ΡΡ ΠΎΠΏΠ°ΡΠ΅Π½ΠΈΡ, ΡΡΠΎ ΠΏΠ°ΡΠ°Π»Π»Π΅Π»ΡΠ½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π»ΠΈ createGlobalStyle
ΠΈΠ· styled-components Π² ΡΡΠ°Π²Π½Π΅Π½ΠΈΠΈ Ρ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠΌ ΡΠΌΠΎΡΠΈΠΉ. ΠΠ½ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π±ΠΎΠ»ΡΡΡΡ ΡΠ°ΡΡΡ ΡΠ²ΠΎΠ΅ΠΉ ΡΠ°Π±ΠΎΡΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° (ΡΡΠΎ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΡΡΡΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΡΠΈΡΠ½ΠΎ Π΄Π»Ρ ΡΡΡΠΎΠ³ΠΎΠ³ΠΎ / ΠΏΠ°ΡΠ°Π»Π»Π΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΆΠΈΠΌΠ°) ΠΈ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ useEffect Π΄Π»Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ Π² ΡΠ²ΠΎΠ΅ΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΎΡΠΈΡΡΠΊΠΈ. createGlobalStyle Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠ°ΡΡ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΏΠ°ΡΠ°Π»Π»Π΅Π»ΡΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ - Π΄Π»Ρ Π½Π΅Π³ΠΎ Π½Π΅Π»ΡΠ·Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΡΠΈΠ»ΠΈ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π°, Π΅ΡΠ»ΠΈ ΡΡΠΎΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ. ΠΠΎΡ
ΠΎΠΆΠ΅, ΡΡΠΎ ΠΊΡΠΎ-ΡΠΎ ΠΏΡΡΠ°Π»ΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠ°ΡΡ Π΅Π³ΠΎ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌΠΈ Π² ΠΏΡΠΎΡΠ»ΠΎΠΌ ΠΌΠ΅ΡΡΡΠ΅, ΠΏΠΎΡΡΠΎΠΌΡ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΠΈΡΡ Π·Π° ΡΡΠΈΠΌ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΎΠΌ.
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΡ Emotion ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡ CSS Π² ΠΎΠ΄ΠΈΠ½ ΠΊΠ»Π°ΡΡ, Π° Π½Π΅ ΠΏΡΡΠ°ΡΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈΠ»ΠΈ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΠΈΠΌΠ΅Π½ ΠΊΠ»Π°ΡΡΠΎΠ². Π Π²Π΅ΡΡΠΈΠΈ 5 Π½Π°ΡΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ² Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ
-Π»ΠΈΠ±ΠΎ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΡ
ΠΊ Π½ΠΈΠΌ ΡΡΠΈΠ»Π΅ΠΉ. ΠΠΎΠΌΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π² ΡΡΠΈΠ»Π΅ ΡΠΌΠΎΡΠΈΠΉ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ ΡΡΠΈΠ»ΠΈ Π² ΠΎΠ΄ΠΈΠ½ ΠΊΠ»Π°ΡΡ. ΠΡΠΎ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎ ΠΈΠ·Π±Π°Π²Π»ΡΠ΅Ρ ΠΎΡ ΡΡΠΈΡ
ΠΏΡΠΎΠ±Π»Π΅ΠΌ Ρ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠΌ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ, ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
Π΄Π»Ρ ΡΡΠΈΠ»Π΅ΠΉ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
Π² Material-UI, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΈΠ»ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΡΠΏΡΠ°Π²Π»ΡΡΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΊΠ»Π°ΡΡΠ°: +1 :.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Ρ Π½Π°Ρ Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅Π½Π° Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΡ
ΠΊΠ»Π°ΡΡΠΎΠ² (Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ), Π° Π·Π°ΡΠ΅ΠΌ ΠΎΠ΄Π½ΠΎ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ (ΠΏΠΎ ΡΠΌΠΎΡΠΈΡΠΌ) ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡ Π²ΡΠ΅ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΈ CSS, Π²ΡΠ΅ΠΊΠ°ΡΡΠΈΠ΅ Π² Π½Π΅Π³ΠΎ.
ΠΠ°ΡΠ΅ΠΌ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΡΡΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΡΡ ΡΠΌΠΎΡΠΈΡΠΌΠΈ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΡΡΠ΄ΠΊΠ° ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
ΠΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠ΅ ΡΠΌΠΎΡΠΈΠΈ (Π±ΡΠ΄Ρ ΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΠΈΠ»ΠΈ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ), ΠΏΡΠΈΠ²ΠΎΠ΄ΡΡ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΊΠ»Π°ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
styled-components ΠΠ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π² ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° (ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅ΡΡΡ Π² ΠΎΠ΄ΠΈΠ½ ΠΊΠ»Π°ΡΡ). ΠΠ΄Π½Π° ΠΈ ΡΠ° ΠΆΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡΠΈΡ Π² ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°Ρ
ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈ ΡΠΎΠΌΡ ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΡ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΊΠ°ΠΊ Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π».
Π§ΡΠΎ Π²Ρ Π΄ΡΠΌΠ°Π΅ΡΠ΅ ΠΎΠ± ΡΡΠΎΠΌ?
ΠΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΠΏΠ°ΡΠ° ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΉ:
Π‘ΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎ React Π² ΡΠ΅Π»ΠΎΠΌ ΠΏΡΠΎΠ³ΠΎΠ»ΠΎΡΠΎΠ²Π°Π»ΠΎ ΠΏΡΠΎΡΠΈΠ² ΠΌΠ°ΡΡΡΠ°Π±Π½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ JSS.
ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Ρ Π±Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠ», ΡΡΠΎ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎ React Π½Π΅ Π³ΠΎΠ»ΠΎΡΠΎΠ²Π°Π»ΠΎ _ Π·Π°_ JSS. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΡΠΎ Π½Π΅ Π±ΡΠ»ΠΎ Β«ΠΏΡΠΎΠ΄Π°Π½ΠΎΒ» ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ?
ΠΡ Π½Π΅ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΡΡΠ°Π²ΠΊΡ Π½Π° ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΡΡ Π»ΠΎΡΠ°Π΄Ρ.
ΠΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΡΡΠ°Π²ΠΊΡ Π½Π° Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΡ Π»ΠΎΡΠ°Π΄Ρ - ΡΡΠΎ Π±ΡΠ»ΠΈ ΡΠΊΠ°ΡΠΊΠΈ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ Π»ΠΎΡΠ°Π΄ΠΈ. ΠΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π΄ΡΡΠ³ΠΈΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ, Π΄ΠΎΡΡΡΠΏΠ½ΡΡ Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ, Π½Π΅ ΠΎΡΠ²Π΅ΡΠ°Π»ΠΎ Π²ΡΠ΅ΠΌ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΠΌ.
ΠΠΌΠΎΡΠΈΠΈ - ΡΡΠΎ Π·Π΄ΠΎΡΠΎΠ²ΠΎ! ΠΠ½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ TS, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π°Π²ΡΠΎΠ·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈ Π²ΡΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° Π½Π°Π±ΠΎΡΠ° ΡΠ΅ΠΊΡΡΠ° - Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS-in-JS - ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΡΡΠΈΠ»Ρ, Π±ΡΠ΄Π΅Ρ Π»ΠΈ ΡΡΠΎ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ?
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ Π±ΠΈΡ ΠΌΠ΅Π½Ρ Π΄ΠΎΡΡΠ°Π»! Π― Π±Ρ Ρ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅ΠΌ ΠΏΠΎΠΌΠΎΠ³, ΡΠ΄Π΅Π»Π°Π² ΡΡΠΎ Π·Π° Π±Π΅ΡΠ°-ΡΠ»Π°Π³ΠΎΠΌ ΠΈΠ»ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ:
ΠΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠ΅ ΡΠΌΠΎΡΠΈΠΈ (Π±ΡΠ΄Ρ ΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΠΈΠ»ΠΈ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ), ΠΏΡΠΈΠ²ΠΎΠ΄ΡΡ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΊΠ»Π°ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘ΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΠ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π² ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° (ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅ΡΡΡ Π² ΠΎΠ΄ΠΈΠ½ ΠΊΠ»Π°ΡΡ).
Π― ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠΌΠ΅ΡΠΈΠ», ΡΡΠΎ ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠ΅ΠΌΡ ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΠΏΡΠ΅ΠΆΠ½ΠΈΠΌ, - Π½Π° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄ - ΡΡΠΎ Π»ΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ΅ΠΌΡ Π΄Π»Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ! ΠΠ½Π΅ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ΡΠ΅Π³ΠΎ ΡΠΊΠ°Π·Π°ΡΡ: ΡΠ΄ΠΈΠ²Π»Π΅Π½:
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΡΠ°Π±ΠΎΡΡ Π½Π°Π΄ M-UI. ΠΠ½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ°Π·Π²ΠΈΠ²Π°Π΅ΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡ.
ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΊ Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°Π½Π΄Π°ΡΡΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌΡ ΡΡΠΈΠ»Ρ - Π»ΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ±. Π― Π·Π½Π°Ρ, ΡΡΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΈ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎ ΠΈΡΠΏΡΠ°Π²ΡΡ Π²ΡΠ΅ Π½ΡΠ°Π½ΡΡ, ΠΈ v5 - ΡΡΠ΄Ρ ΠΏΠΎ Π²ΡΠ΅ΠΌΡ - Π±ΡΠ΄Π΅Ρ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΡΡΠΎΠΉ! : ΡΠ°ΠΊΠ΅ΡΠ°:
ΠΠ°ΠΊ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΈ ΡΠΌΠΎΡΠΈΠΈ, Ρ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠ΄ΠΈΡΡ, ΡΡΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ Π±Π΅Π·Π±ΠΎΠ»Π΅Π·Π½Π΅Π½Π½ΡΠΉ.
+ ΡΠΌΠΎΡΠΈΠΈ Π»ΡΡΡΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ Π΄Π»Ρ ΠΌΠ°ΡΠΈΠ½ΠΎΠΏΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°
ΠΡΡΡΡΠΏΠ°Ρ Π² ΡΠΎΠ»ΠΈ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡΠ΅Π³ΠΎ Emotion - Π·Π²ΡΡΠΈΡ Π·Π΄ΠΎΡΠΎΠ²ΠΎ π
ΠΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π²ΡΠΏΡΡΡΠΈΡΡ Π² Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π½ΠΎΠ²ΡΠΉ ΠΊΡΡΠΏΠ½ΡΠΉ ΠΏΡΠΎΠ΄ΡΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π²ΠΎΠ»ΡΡΠΈΠ΅ΠΉ, ΡΠΎΠ»ΡΠΊΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΈΡΡΠΊΠΈ, ΠΎΠ±ΡΠΈΠ΅ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ, ΡΠΊΡΡΡΡΠ΅ Π·Π°ΡΠ΅ΠΏΠΊΠΈ ΠΈ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΡΠΈΠΏΠΎΠ² TS (Π»ΡΡΡΠΈΠΉ Π²ΡΠ²ΠΎΠ΄ ΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ).
ΠΡ , ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠ°Π½Π½ΡΠΉ ΠΏΠ°ΡΡΠ΅Ρ! ΡΡΠΎ ΡΡΡΡΠ°Π½ΡΠ΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΡΠ°Π΅Π²ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ Π² Emotion ΠΈ Styled-Components (Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ½ΠΈ ΠΎΠ±Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ ΠΏΠ°ΡΡΠ΅Ρ). ΠΠ½ ΠΈ ΠΌΠ΅Π½ΡΡΠ΅, ΠΈ Π±ΡΡΡΡΠ΅Π΅.
ΠΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ ΠΊΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, ΠΊΠ°ΠΊΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π²Π²ΠΎΠ΄ΠΈΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ (Π΅ΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ²ΡΠ΅ ΠΈΠΌΠ΅ΡΡΡΡ)?
ΠΠ΅ ΡΠ²Π΅ΡΠ΅Π½, ΠΈΠΌΠ΅Π΅Ρ Π»ΠΈ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π½ΠΎ Π±ΡΠ»ΠΈ Π»ΠΈ ΡΠ΅ΡΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² babel Π΄Π»Ρ ΡΠΌΠΎΡΠΈΠΉ ΠΈ / ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΡΡΠΈΠ»Ρ? ΠΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π±ΠΎΡΡ.
ΠΠ°ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, MUI ΡΠ°Π½Π΅Π΅ ΡΠΊΠ°Π·ΡΠ²Π°Π», ΡΡΠΎ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² ΡΡΠΈΠ»Π΅, ΡΠ°ΠΊ ΡΡΠΎ ΡΡΠΎ ΡΡΡΠΏΡΠΈΠ·. Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΡΠΌΠΎΡΠΈΠΈ - ΠΎΡΠ»ΠΈΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°, Π½ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π²ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ Π»ΡΠ΄Π΅ΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΡΠΈΠ»ΠΈ, Π²Π°ΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΡΠΏΠΎΡΠΎΠ±Ρ Π΄Π°ΡΡ ΠΈΠΌ Ρ ΠΎΡΠΎΡΠΈΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Π½Π΅ Ρ ΠΎΡΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΡ ΠΊ ΡΠΌΠΎΡΠΈΡΠΌ.
@ ee0pdt ΠΠΌΠΎΡΠΈΡ ΠΎΡΠ΅Π½Ρ ΠΈ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ ΠΎΠΆΠ° Π½Π° ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ. Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΡΡΠΎ ΡΠ°ΡΡΡ Π²ΡΠ΅Π³ΠΎ Π²ΡΠ±ΠΎΡΠ° Emotion Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΎΡΠ΅Π²ΠΈΠ΄Π½Ρ, Π° ΠΌΠΈΠ³ΡΠ°ΡΠΈΠΎΠ½Π½Π°Ρ Π·Π°Π΄ΠΎΠ»ΠΆΠ΅Π½Π½ΠΎΡΡΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ.
Π Π΅ΡΡΡ ΡΠ΅Π»ΡΠΉ ΡΠ°Π·Π΄Π΅Π» ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ΅ ΠΎΠ±ΠΎΠΈΡ , ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π²ΡΠ±ΠΎΡΠ°. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ, Π½ΠΎ, ΠΎΠΏΡΡΡ ΠΆΠ΅, ΡΡΠ°Π½Π΄Π°ΡΡΠΈΠ·Π°ΡΠΈΡ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π½Π°ΠΌ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ. ΠΠΎΠ»Π½ΡΠΉ ΠΏΠ°ΡΠ°Π»Π»Π΅Π»ΠΈΠ·ΠΌ ΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠΈ - ΡΡΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ ΠΏΡΠ΅ΠΏΡΡΡΡΠ²ΠΈΠ΅. Π― ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, ΡΡΠΎ Π΄ΡΡΠ³ΠΈΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΡΠΎ-ΡΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ΅, ΠΈ ΡΡΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ. Π― Π»ΡΡΡΠ΅ Π±ΡΠ΄Ρ ΡΡΡΠ΅ΠΌΠΈΡΡΡΡ ΠΊ ΡΡΠ°Π½Π΄Π°ΡΡΠΈΠ·Π°ΡΠΈΠΈ
ΠΠΎΡΠ΅ΠΌΡ Π±ΡΠ» ΠΈΡΠΊΠ»ΡΡΠ΅Π½ styletron-react? ΠΠ½ Π½Π΅ ΡΡΠΈΡΡΠ²Π°Π΅Ρ ΡΠ΅Π»ΡΡ ΠΌΠ΅ΡΡΠΈΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π΅ ΡΡΠΈΡΡΠ²Π°Π»Π°ΡΡ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎΡΡΠ΅Π±Π»Π΅Π½ΠΈΠ΅ ΠΏΠ°ΠΌΡΡΠΈ. ΠΠ²ΠΈΠΆΠΎΠΊ ΡΡΠΈΠ»Π΅ΡΡΠΎΠ½Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ (ΠΈ fela) ΡΠ²Π»ΡΠ΅ΡΡΡ Π°ΡΠΎΠΌΠ°ΡΠ½ΡΠΌ. Π₯ΠΎΡΡ ΠΎΠ½ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅, ΠΎΠ½ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠ°ΠΌΡΡΠΈ. ΠΠ°Π±Π»ΡΠ΄Π°ΡΡ Π·Π° ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ°Π½ΠΈΡ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π΄Π΅Π»Π°ΡΡ ΠΈ ΡΠ΅ΡΠ΅Π· Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ½ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ> 1 ΠΠ, ΡΡΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ. ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ Π·Π°Π²ΠΈΡΠ°Π΅Ρ.
Π‘ Π°ΡΠΎΠΌΠ°ΡΠ½ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΠΎΠΉ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΡΠ»ΡΡΡΠ°Π΅ΡΡΡ ΡΠΎ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎ ΠΏΠΎ Π²ΡΠ΅ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π°ΡΠΎΠΌΠ°ΡΠ½ΡΠΉ Β«ΠΊΠ»Π°ΡΡΒ» ΠΊΡΡΠΈΡΡΠ΅ΡΡΡ. Π‘ΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, Π² ΡΠ΅ΡΡΠ΅ ΡΠΎΠΆΠ΅ Π½Π΅ ΠΎΡΡΠ°Π·ΠΈΠ»ΠΎΡΡ.
ΠΠΎΠ²ΠΎΠ»Π΅Π½ Π»ΡΠ±ΡΠΌ, Π΅ΡΠ»ΠΈ ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ SSR
Π― ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ ΠΎΡΠΎΠ·Π²Π°Π» ΡΠ²ΠΎΠΉ Π³ΠΎΠ»ΠΎΡ Π·Π° ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ Π²ΠΎΠΏΡΠΎΡ ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°Ρ
: sweat_smile: - ΡΠ½Π°ΡΠ°Π»Π° Π½Π°ΡΡΠΈΠ»ΡΡ ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π²Π°ΡΡ ΡΠΌΠΎΡΠΈΠΈ ΡΠ΅ΡΠ΅Π· ΡΠ±ΠΎΡΠ½ΠΈΠΊ ΡΠ°ΡΡΠΊΠ°Π·ΠΎΠ², Π½ΠΎ It will mean that all components styles need to be created using the styled API, which means for developers they will always have wrapper components if they need to re-style.
Π·Π°ΡΡΠ°Π²ΠΈΠ» ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡΡΡ.
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π²ΡΠ΅ΠΌ Π·Π° Π±ΡΡΡΡΡΠΉ ΠΎΡΠ·ΡΠ². ΠΠΎΡ ΠΎΡΠ²Π΅ΡΡ Π½Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ / Π²ΠΎΠΏΡΠΎΡΡ.
ΠΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ ΠΊΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, ΠΊΠ°ΠΊΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π²Π²ΠΎΠ΄ΠΈΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ (Π΅ΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ²ΡΠ΅ ΠΈΠΌΠ΅ΡΡΡΡ)?
@ sag1v Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ styled-components
vs emotion
Π½Π΅ Π²Π½ΠΎΡΠΈΡ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΅ ΠΊΡΠΈΡΠΈΡΠ½ΡΡ
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°ΡΡ. ΠΠ±ΡΠΈΠ΅ ΠΊΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π±ΡΠ΄ΡΡ ΠΊΠ°ΡΠ°ΡΡΡΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΡ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π²Π½ΡΡΡΠΈ ΡΠ΅ΠΌΡ:
// previosly
root: {
contained: {
'&$disabled': { // <-- this part will need to be transformed
color: 'red',
},
},
containedPrimary: {
color: 'blue',
},
}
// after
root: {
contained: {
'&.Mui-disabled': {
color: 'red',
},
},
}
ΠΠ΄Π½Π°ΠΊΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΌΠ΅ΠΆΠ΄Ρ emotion
& styled-components
ΠΈΠ΄Π΅Π½ΡΠΈΡΠ΅Π½, ΡΡΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΠΠ΅ ΡΠ²Π΅ΡΠ΅Π½, ΠΈΠΌΠ΅Π΅Ρ Π»ΠΈ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π½ΠΎ Π±ΡΠ»ΠΈ Π»ΠΈ ΡΠ΅ΡΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² babel Π΄Π»Ρ ΡΠΌΠΎΡΠΈΠΉ ΠΈ / ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΡΡΠΈΠ»Ρ? ΠΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π±ΠΎΡΡ.
@ hc-codersatlas Π½Π΅Ρ, Π½ΠΎ ΠΏΠ΅ΡΡΠΎΠΌΠ°Π½ΡΡ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ Π»ΡΡΡΠΈΠΌΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ Ρ Π½Π΅ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. Π₯ΠΎΡΠΎΡΠΈΠΉ Π²ΡΠ·ΠΎΠ²!
ΠΠΎΡΠ΅ΠΌΡ Π±ΡΠ» ΠΈΡΠΊΠ»ΡΡΠ΅Π½ styletron-react? ΠΠ½ Π½Π΅ ΡΡΠΈΡΡΠ²Π°Π΅Ρ ΡΠ΅Π»ΡΡ ΠΌΠ΅ΡΡΠΈΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π΅ ΡΡΠΈΡΡΠ²Π°Π»Π°ΡΡ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎΡΡΠ΅Π±Π»Π΅Π½ΠΈΠ΅ ΠΏΠ°ΠΌΡΡΠΈ. ΠΠ²ΠΈΠΆΠΎΠΊ ΡΡΠΈΠ»Π΅ΡΡΠΎΠ½Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ (ΠΈ fela) ΡΠ²Π»ΡΠ΅ΡΡΡ Π°ΡΠΎΠΌΠ°ΡΠ½ΡΠΌ. Π₯ΠΎΡΡ ΠΎΠ½ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅, ΠΎΠ½ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠ°ΠΌΡΡΠΈ. ΠΠ°Π±Π»ΡΠ΄Π°ΡΡ Π·Π° ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ°Π½ΠΈΡ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π΄Π΅Π»Π°ΡΡ ΠΈ ΡΠ΅ΡΠ΅Π· Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ½ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ> 1 ΠΠ, ΡΡΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ. ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ Π·Π°Π²ΠΈΡΠ°Π΅Ρ.
Π‘ Π°ΡΠΎΠΌΠ°ΡΠ½ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΠΎΠΉ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΡΠ»ΡΡΡΠ°Π΅ΡΡΡ ΡΠΎ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎ ΠΏΠΎ Π²ΡΠ΅ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π°ΡΠΎΠΌΠ°ΡΠ½ΡΠΉ Β«ΠΊΠ»Π°ΡΡΒ» ΠΊΡΡΠΈΡΡΠ΅ΡΡΡ. Π‘ΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, Π² ΡΠ΅ΡΡΠ΅ ΡΠΎΠΆΠ΅ Π½Π΅ ΠΎΡΡΠ°Π·ΠΈΠ»ΠΎΡΡ.
ΠΠΎΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρ ΡΠΎΠ³ΠΎ, ΠΏΠΎΡΠ΅ΠΌΡ styletron-react
Π±ΡΠ»ΠΎ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΎ, ΠΌΠΎΠ³ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²Π²Π΅ΡΡΠΈ Π² Π·Π°Π±Π»ΡΠΆΠ΄Π΅Π½ΠΈΠ΅, ΠΈΠ·Π²ΠΈΠ½ΠΈΡΠ΅ ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΏΠΎΠ²ΠΎΠ΄Ρ, Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ PR. ΠΠ΅ΡΡΠΎΠΌΠ°Π½Ρ Ρ
ΠΎΡΠΎΡ, Π½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ styletron ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎ: https://www.npmtrends.com/styletron-react-vs-@emotion/core -vs-styled-components Π₯ΠΎΡΡ ΠΈ ΡΠΌΠΎΡΠΈΠΈ, ΠΈ ΡΡΠΈΠ»ΠΈ-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π±ΠΎΠ»Π΅Π΅ 2000000 Π·Π°Π³ΡΡΠ·ΠΎΠΊ Π·Π° ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ 6 ΠΌΠ΅ΡΡΡΠ΅Π², ΡΡΠΈΠ»Π΅ΡΡΠΎΠ½ - ΠΎΠΊΠΎΠ»ΠΎ 15000.
Π’Π°ΠΊΠΆΠ΅ Π°ΡΠΎΠΌΠ°ΡΠ½ΡΠΉ CSS ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡΠΌΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΎΡΠ°.
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π²ΠΎΠΏΡΠΎΡ, ΡΠ΅ΡΠΈΠΌ Π»ΠΈ ΠΌΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΌΠΎΡΠΈΡ, Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠΎΠ΄ Π½ΠΈΠΆΠ΅ ΠΏΠΎΠ²Π΅ΡΡ Π²ΡΠ΅Ρ ΡΠ°ΠΉΠ»ΠΎΠ²?
/ ** @jsx jsx * /
ΠΡΠΎ ΠΏΡΠ°Π³ΠΌΠ° JSX, ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΡΠ°Π³ΠΌΠ° JSX - React.createElement
ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΅Π³ΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ css
Π² ΡΠΌΠΎΡΠΈΡΡ
. ΠΠ»Ρ API styled
Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π»Ρ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ API className ΠΎΠ½ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ΅Π½.
ΠΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡΠ°Π³ΠΌΡ JSX, Π½ΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° Babel, ΠΈ ΠΎΠ½Π° ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ Ρ ΡΠ΄ΡΠ΅ΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ ΡΠΎ ΡΡΠΎΡΠΎΠ½Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ - Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, TS Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΠΈΠΏ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS ΡΠ°ΠΊ ΠΆΠ΅ ΡΠΎΡΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΡΠ°Π³ΠΌΡ JSX. ΠΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π·Π΄Π΅ΡΡ: https://github.com/emotion-js/emotion/pull/1941/files#diff -9abe25e5d2b00958d4b9849f5f20c139R5
@mnajdova ΡΠΏΠ°ΡΠΈΠ±ΠΎ. Π― ΠΏΡΠΎΡΡΠΎ Π½Π°Π΄Π΅ΡΠ»ΡΡ, ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠ°ΠΌΡΡΠΈ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠΊΡΡΡΠΎ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΏΠΎΡΡΡΠΈΡΡΡΡ, Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, Π·Π° ΡΡΠΈΠ»Π΅ΡΡΠΎΠ½. Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ Π·Π°Π³ΡΡΠ·ΠΎΠΊ ΠΈΠ»ΠΈ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π° - Β«ΡΠΎΠ»ΡΠΊΠΎΒ» Uber ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠΈΠ»Π΅ΡΡΠΎΠ½ :) ΡΠ°ΠΊ ΡΡΠΎ Π½Π΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡΠ΅ΡΡ. ΠΡΠΎΠ³ΠΎΠ»ΠΎΡΠΎΠ²Π°Π» Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ Π·Π° ΡΠΌΠΎΡΠΈΠΈ.
ΠΡΠ»ΠΎ Π±Ρ Π·Π΄ΠΎΡΠΎΠ²ΠΎ, Π΅ΡΠ»ΠΈ Π±Ρ ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°Π» ΠΏΠ»Π°Π³ΠΈΠ½ babel ΠΈΠ»ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²ΡΠ²Π°ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π² ΡΠ΅Π°Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ css. Π£ΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΠΎΠ΄ΠΎΠ±Π½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ compiled
. ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΡΠΈΠ»Π΅ΠΉ ΡΠ΅Π°Π»ΡΠ½ΠΎ ΡΡΠ°ΡΠΈΡΠ½Ρ.
Π§ΡΠΎΠ±Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ Fela, ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π½Π°Π±ΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ fela-plugin-rtl
, fela-plugin-prefixer
ΡΡΠΎ Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΡΡ
ΡΠ΄ΡΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ (https://github.com/microsoft/fluentui/pull/12289) π’ Π Π·Π°ΡΠ΅ΠΌ Π²Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ Emotion (https://github.com/microsoft/fluentui/pull/13547), ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π² Π΄Π²Π° ΡΠ°Π·Π° Π±ΡΡΡΡΠ΅Π΅, ΡΠ΅ΠΌ Fela π¦
ΠΠ΅Π½Ρ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠΊΠΎΠ²ΠΈΠ½Ρ css
ΠΎΡ Emotion. Π‘ΡΠ΄Ρ ΠΏΠΎ ΠΌΠΎΠ΅ΠΌΡ ΠΎΠΏΡΡΡ, ΡΡΠΎ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ»Π°Π³. ΠΠ½Π΅ ΠΏΡΠΈΡΠ»ΠΎΡΡ ΡΠ΄Π°Π»ΠΈΡΡ ΡΠ°ΠΊΡΡ ββΠ²Π΅ΡΡ ΠΈΠ· Π±ΠΎΠ»ΡΡΠΎΠΉ Π±Π°Π·Ρ ΠΊΠΎΠ΄Π°, ΠΈ ΡΡΠΎ Π±ΡΠ»ΠΎ Π½Π΅ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ. ΠΠΎΡΠ΅ΠΌΡ? ΠΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ Π°Π±ΡΡΡΠ°ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠΈΠ½ΠΎΡΠΈΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌ, ΡΠ΅ΠΌ ΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ΅ΡΠ°Π΅Ρ Π² Π΄ΠΎΠ»Π³ΠΎΡΡΠΎΡΠ½ΠΎΠΉ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Π΅.
Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² ΠΌΡ ΠΏΡΡΠ°Π΅ΠΌΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ styled
, Π½ΠΎ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ»ΡΡΠ°ΡΡ
Π½Π°Ρ Π²ΠΏΠΎΠ»Π½Π΅ ΡΡΡΡΠ°ΠΈΠ²Π°Π΅Ρ ΡΡΠ½ΠΊΡΠΈΡ makeStyles
Π΄Π»Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΠΊΠ»Π°ΡΡΠΎΠ².
ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ Π΄Π»Ρ ΡΡΠΈΡ
Π΄Π²ΡΡ
API Π½Π΅Ρ ΠΊΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, ΠΈ Ρ Π½Π΅ Π²ΡΠ½ΡΠΆΠ΄Π΅Π½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ°ΠΊΡΠΎΡ css
.
ΠΠ΅Π½Ρ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS-ΡΠ°ΠΉΠ»ΠΎΠ² ΠΎΡ Emotion.
@yordis Π’Π΅Π±Ρ ΡΠΎΡΠ½ΠΎ Π½Π΅ Π·Π°ΡΡΠ°Π²ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠΏΠΎΡΡ css
. Π― ΠΏΠΎΠ΄ΠΎΠ·ΡΠ΅Π²Π°Ρ, ΡΡΠΎ Π±ΡΠ΄ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ makeStyles
ΠΈ withStyles
. ΠΠ°Π΄Π΅ΡΡΡ, ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΡ
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΎ ΠΊΠΎΠ΄ΠΎΠ²ΠΎΠΉ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ ΠΈΠΌΠΏΠΎΡΡΠ°. Π― Π½Π΅ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π² makeStyles
ΠΈΠ»ΠΈ withStyles
Π±ΡΠ΄Π΅Ρ ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΡΠΌ Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΌΠΎΡΠΈΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ Ρ ΠΎΠΆΠΈΠ΄Π°Ρ, ΡΡΠΎ Π»ΡΠ±Π°Ρ ΡΠ΅ΠΊΡΡΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΡΠΈΡ
API Π±ΡΠ΄Π΅Ρ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΡΡΡΡ ΡΠ΅ΡΠ΅Π· ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΠΏΠ°ΠΊΠ΅Ρ (ΡΠ°ΠΊ ΡΡΠΎ " @ material-ui / core "Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ JSS-Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ), ΠΊΠΎΡΠΎΡΡΠΉ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΠΏΠΎΠ»ΡΡΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΡΠ»Π΅ Π²ΡΠΏΡΡΠΊΠ° v5 (ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ Ρ makeStyles
ΠΈ withStyles
, Π½Π΅ ΠΏΡΠΈΠ±ΠΈΡΡ ΡΠ΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΡΡΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΠΌΠΎΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΎ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΡΡ
ΡΠΌΠΎΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ Π²ΠΏΠ΅ΡΠ΅Π΄).
π Π²ΡΠ±ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Emotion. ΠΠ΄Π½ΠΎΠΉ ΠΈΠ· ΠΏΡΠΈΡΠΈΠ½, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΠΎΡ ΠΊΠΎΠΌΠ°Π½Π΄Π° Π²ΡΠ±ΡΠ°Π»Π° Emotion, ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠΊΠ°Π· ΠΎΡ styled
API styled-components
(ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΉ styled
API Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ css
prop). Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Emotion Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΡΠΈΠ»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°, ΠΈ ΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΎΡΠ΅Π½Ρ Ρ
ΠΎΡΠΎΡΠΎ. ΠΡΡΡΠΎΠ΅Π½Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ»Π° Π±Ρ Π²ΠΈΡΠ΅Π½ΠΊΠΎΠΉ Π½Π° ΡΠΎΡΡΠ΅.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΈΡ ΡΠ°ΠΊΡΠΎΠ²:
ΠΠ½ΠΎΠ³ΠΈΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ Material-UI. ΠΠΎΠ½Π΅ΡΠ½ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ²Π°ΡΡ, ΡΡΠΎ Π² ΠΈΡ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ΅ Π΅ΡΡΡ Π΄Π²Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ CSS-in-JS
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΆΠΈΠΌΠ°
ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ: Π§Π°ΡΡΠΈΡΠ½ΠΎ
ΠΡΠ»ΠΈ Π±Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈΠΌΠ΅Π»ΠΈ ΠΏΠΎΠ»Π½ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΆΠΈΠΌΠ°, Π±ΡΠ»ΠΎ Π±Ρ ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π·ΡΠΌΠ½ΡΠΌ Π²ΡΠ±ΠΎΡΠΎΠΌ, ΡΡΠΈΡΡΠ²Π°Ρ, ΡΡΠΎ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ MUI Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² (Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ JSS)? ΠΡΠ½ΠΊΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΡΠΌΠΎΡΠΈΠΈ ΠΌΠ΅Π½ΡΡΠ΅ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΏΠ°ΠΊΠ΅ΡΠ°, ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΏΠΎΡΠ½ΡΠΌ, Π΅ΡΠ»ΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ 2 ΡΠ΅ΡΠ΅Π½ΠΈΡ css-in-js. Π Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Ρ, ΡΡΠΎ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ MUI Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π΅Π³ΠΎ ΡΡΠΈΠ»Π΅ΠΉ.
ΠΠΎΠ³Π΄Π° Ρ ΠΈ ΠΌΠΎΡ ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΡΠΌΠΎΡΠΈΠΈ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², Ρ ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΡΡ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠ°ΠΌΠΈ, ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡΠΈΠΌΠΈ Π² Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ ΡΠΌΠΎΡΠΈΠΉ. Π ΠΌΠ½Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΡΡΠΎ Π²Ρ, ΡΠ΅Π±ΡΡΠ°, Π΄ΡΠΌΠ°Π΅ΡΠ΅ ΠΎΠ± ΡΡΠΈΡ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠ°Ρ , ΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ Π½ΠΈΠΆΠ΅.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½ΠΈΠΆΠ΅ Emotion StyledComponent;
const StyledComponent = styled.div`
${({color}) => color && `color: ${color}`};
display: flex;
justify-content: center;
align-items: center;
background: teal;
font-size: 20px;
padding-top: 8px;
padding-bottom: 8px;
margin-top: 12px;
margin-bottom: 12px;
border: 1px solid grey;
`
ΠΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΎΠΏΠΎΡΡ ΡΠ²Π΅ΡΠ° ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ Π½ΠΎΠ²ΡΠΉ ΠΊΠ»Π°ΡΡ css ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΠΎΠΏΠΎΡΠ°ΠΌΠΈ css ( display: flex, justify-content, ..., border: 1px soild grey
). ΠΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² css Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ css Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ²Π΅ΡΠ°, ΡΠΌ. ΠΠΈΠΆΠ΅;
ΠΡΠ΅ ΠΎΠ΄Π½Π° Π½Π΅ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ»ΠΈ, Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄Π½ΡΠΌ ΠΎΡ StyledComponent
ΠΎΠ½ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠ»Π°ΡΡ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ css-ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ, ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΠΈΠ· Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ StyledComponent
. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½ΠΈΠΆΠ΅;
const DerivedComponent = styled(StyledComponent)`
font-family: monospace;
`
ΠΠ½ ΡΠΎΠ·Π΄Π°Π΅Ρ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΊΠ»Π°ΡΡ css, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ font-family: monospace
ΠΊ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡ Π²ΡΡΠ΅ ΠΊΠ»Π°ΡΡΡ css, ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌΡ ΠΈΠ· StyledComponent
. Π’ΠΎ Π΅ΡΡΡ ΠΎΠ½ ΡΠΎΠ·Π΄Π°Π΅Ρ CSS, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½Ρ ΠΈΠ· StyledComponent
ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅;
Π’Π΅ΠΏΠ΅ΡΡ, Π΅ΡΠ»ΠΈ Π²ΡΡΠ΅ StyledComponent
ΠΈ DerivedComponent
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅, Ρ Π½Π°Ρ (ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ) Π΅ΡΡΡ Π΄Π²Π° ΠΊΠ»Π°ΡΡΠ° css, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΠ΅ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° css (ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΠΈΠ΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²ΠΎΠΌ ΡΡΠΈΡΡΠΎΠ²). ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ Π½ΠΈΠΆΠ΅;
ΠΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π±Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ, ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠ»Π°ΡΡΠΎΠ² css, ΠΈΠΌΠ΅ΡΡΠΈΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° css Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°, ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΡΠΈ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π±ΡΡΡΡΠΎ.
Π― ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ», ΡΡΠΎ Ρ Emotion, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΡΠΎΡΡΠ°Π²Π»ΡΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅, ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ ΠΊΠ»Π°ΡΡΡ css Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΡ ΡΡ ΡΠ²ΠΎΠΉΡΡΠ² css.
Π― Π½Π΅ ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ ΡΡΠΎΡ Π΄ΡΠ±Π»ΠΈΠΊΠ°Ρ css props Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΊΠ»Π°ΡΡΠ΅ css ΠΈΠΌΠ΅Π΅Ρ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ Π·Π°ΠΌΠ΅ΡΠ½ΠΎΠ΅ Π²Π»ΠΈΡΠ½ΠΈΠ΅ Π½Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π½ΠΎ ΠΌΠ½Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΡΡΡ Π»ΠΈ ΡΡΠΎ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΡΠΈ Π²ΡΠ±ΠΎΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΌΠΎΡΠΈΠΉ.
Π― Π½Π΅ ΡΠΎΠΌΠ½Π΅Π²Π°ΡΡΡ Π² ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ Emotion ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ CSSStyle Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. Emotion - ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ
Π±ΡΡΡΡΡΡ
ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ CSS, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π»ΠΈ ΡΠ΅ΡΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ.
ΠΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ, ΡΡΠΎ ΡΡΠΈΠ»Ρ CSS ΡΠ°Π·Π΄ΡΠ²Π°Π΅ΡΡΡ. Π ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Emotion ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ SSR (ed), ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΡΠΈΠ»ΠΈ Π²ΡΡΡΠΎΠ΅Π½Ρ Π² HTML, ΠΌΡ ΠΏΡΠΎΡΡΠΎ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΈΠ·Π»ΠΈΡΠ½Π΅ ΡΠ°Π·Π΄ΡΡΡΠΉ (Ρ ΡΠ΅Π³Π°ΠΌΠΈ ΡΡΠΈΠ»Ρ css) HTML-ΡΠ°ΠΉΠ». Π§ΡΠΎ, Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ΅Π³ΠΎΠ² Ρ Π½Π΅Π½ΡΠΆΠ½ΡΠΌΠΈ css-ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΠ°ΠΌΠΈ.
ΠΡΠ»ΠΈ Π±Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈΠΌΠ΅Π»ΠΈ ΠΏΠΎΠ»Π½ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΆΠΈΠΌΠ°, Π±ΡΠ»ΠΎ Π±Ρ ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π·ΡΠΌΠ½ΡΠΌ Π²ΡΠ±ΠΎΡΠΎΠΌ, ΡΡΠΈΡΡΠ²Π°Ρ, ΡΡΠΎ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ MUI Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² (Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ JSS)? ΠΡΠ½ΠΊΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΡΠΌΠΎΡΠΈΠΈ ΠΌΠ΅Π½ΡΡΠ΅ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΏΠ°ΠΊΠ΅ΡΠ°, ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΏΠΎΡΠ½ΡΠΌ, Π΅ΡΠ»ΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ 2 ΡΠ΅ΡΠ΅Π½ΠΈΡ css-in-js. Π Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Ρ, ΡΡΠΎ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ MUI Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π΅Π³ΠΎ ΡΡΠΈΠ»Π΅ΠΉ.
@petermikitsh ΠΏΡΠΈΡΠΈΠ½Ρ, ΠΏΠΎ ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΡ ΠΏΡΠΈΡΠ»ΠΈ ΠΊ Π²ΡΠ²ΠΎΠ΄Ρ ΠΎΠ± ΡΠΌΠΎΡΠΈΡΡ , Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΠ΅ΡΡΡΠ΅ ΠΏΡΠ½ΠΊΡΠ° Π² Π·Π°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ
ΠΠΎΠΌΠ½Ρ ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΌΠΎΠΌΠ΅Π½ΡΠ΅, Π΅ΡΠ»ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Ρ
ΠΎΡΡΡ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ Π½Π°Π»ΠΈΡΠΈΡ Π΄Π²ΡΡ
ΡΠ΅ΡΠ΅Π½ΠΈΠΉ css-in-js Π² ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ΅, ΡΡΠΎΠΈΠΌΠΎΡΡΡ ΠΌΠΈΠ³ΡΠ°ΡΠΈΠΈ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π° Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° Π½Π° ΡΠΌΠΎΡΠΈΠΈ + ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π΄ΡΡΠ³ΠΎΠΉ API, ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΎΡ styled
.
@ ko-toss, ΡΠΏΠ°ΡΠΈΠ±ΠΎ, ΡΡΠΎ Π½Π°ΠΏΠΈΡΠ°Π»ΠΈ ΡΡΠΎ, ΡΡΠΎ Π²ΡΠ΅ Ρ ΠΎΡΠΎΡΠΈΠ΅ ΠΌΠΎΠΌΠ΅Π½ΡΡ. Π’ΠΎΡ ΡΠ°ΠΊΡ, ΡΡΠΎ ΡΠΌΠΎΡΠΈΡ Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ ΠΎΠ΄Π½ΠΎ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ, Π΄Π΅Π»Π°Π΅Ρ Π΅Π³ΠΎ Π»ΡΡΡΠΈΠΌ ΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ Π΄Π»Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ. ΠΡΠΎΠ±Π»Π΅ΠΌΠ°, Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΡΠΎΠ»ΠΊΠ½ΡΡΡΡΡ Ρ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌΠΈ ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ ΠΊΠ»Π°ΡΡΠΎΠ², Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΏΠΎΠ±Π΅Π΄ΠΈΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ.
Π Π΄ΡΡΠ³ΠΎΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π°ΡΠΎΠΌΠ°ΡΠ½ΡΠΉ css, Π³Π΄Π΅ ΠΏΠΎΡΡΠ΅Π±Π»Π΅Π½ΠΈΠ΅ ΠΏΠ°ΠΌΡΡΠΈ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡΡΡΠ΅, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° css Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·, Π½ΠΎ Π΄Π΅Π»Π°ΡΡ ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·ΡΠ΅ΠΌΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ°ΠΌ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ className ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ Π°ΡΠΎΠΌΠ°ΡΠ½ΡΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ, ΠΈ ΡΠ½ΠΎΠ²Π° ΠΊΠ°ΠΊΠΎΠ΅ ΠΈΠ· Π½ΠΈΡ Π²ΡΠΈΠ³ΡΡΠ²Π°Π΅Ρ, Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΏΠΎΡΡΠ΄ΠΊΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ Π½Π°ΠΏΠΈΡΠ°Π½Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΠ΅ΡΠΈΡΠ΅ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°ΡΡ Π²ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΈΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ, ΡΡΠΎ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ.
Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, Ρ ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π»ΡΠ±ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ css-in-js, Π»ΡΠ΄ΠΈ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΏΡΠΎΡΡΠΎ ΡΠ»ΡΡΠ°ΠΉΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ ΡΡΠΈΠ»Π΅ΠΉ, ΠΎΠ½ΠΈ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°Π½Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ props.
ΠΠ΄Π½Π°ΠΊΠΎ, ΠΎΠΏΡΡΡ ΠΆΠ΅, ΡΡΠΎ Ρ ΠΎΡΠΎΡΠΈΠ΅ ΠΌΠΎΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΠΌΠ΅ΡΡ Π² Π²ΠΈΠ΄Ρ, Π±ΠΎΠ»ΡΡΠΎΠ΅ ΡΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΡΠΎ, ΡΡΠΎ ΠΏΠΎΠ΄Π΅Π»ΠΈΠ»ΠΈΡΡ ΠΈΠΌΠΈ π
- Π΅ΡΠ΅?
ΠΊΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ ΠΈΠ΄Π΅ΠΈ [ΡΡΠΈΠ»Ρ] (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, [style9])
- Π΅ΡΠ΅?
style9 ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ Π΄Π²ΠΈΠΆΠΎΠΊ CSS, ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠΉ Ρ ΠΈΠ΄Π΅Π΅ΠΉ ΡΡΠΈΠ»Ρ.
ΠΠΎΡ ΠΎΠΆΠ΅, ΡΡΠΎ ΡΡΠ΅Π±ΡΠ΅Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΡΠ±ΠΎΡΠΊΠΈ, ΡΡΠΎ ΠΎΡΡΠΎΠ»ΠΊΠ½Π΅Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ Π»ΡΠ΄Π΅ΠΉ ΠΎΡ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ².
(ΡΡΠΎ ΡΠΊΠΎΡΠ΅Π΅ ΠΊ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠΌΠΎΡΠΈΠΈ - Ρ ΠΎΡΠΎΡΠΈΠΉ Π²ΡΠ±ΠΎΡ)
https://github.com/cristianbote/goober (1 ΠΠ, ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΡΡΡΡ Ρ ΡΠΆΠ΅ ΡΠΌΠΎΡΠΈΠΉ)
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΠ΅ Π½Π΅Ρ ΠΎΠΏΡΡΠ° Π² ΡΡΠΎΠΌ, Π½ΠΎ Ρ Ρ
ΠΎΡΡ ΠΎΠ΄Π½Π°ΠΆΠ΄Ρ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ.
@cztomsik ΠΠΎΡ ΠΎΠΆ Π½Π° https://github.com/kuldeepkeshwar/filbert-js, Π½ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ JavaScript (ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΠΊΠ° ΡΠ°Π±Π»ΠΎΠ½Π° CSS)
ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΡΠΎΠ², ΠΏΡΠΎΠ²Π΅Π΄Π΅Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ google lighthouse ΠΏΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ:
Π Π²Π°ΡΠ΅ΠΌΡ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ, Ρ ΠΏΡΠΎΠ²Π΅Π» Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΡΠ΅ΡΡΠΎΠ² Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² v5, ΡΠΌΠΎΡΠΈΠΉ v10 ΠΈ ΡΠΌΠΎΡΠΈΠΉ v11, Ρ / Π±Π΅Π· ΠΏΠ»Π°Π³ΠΈΠ½Π° babel, Ρ Π²Π°Π½ΠΈΠ»ΡΠ½ΡΠΌ API, css props API ΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠΌ API. ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π² ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΠΈ!
Π Π°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π»ΠΈ Π»ΠΈ Π²Ρ Π½ΠΎΠ²ΡΡ Π²ΠΎΠ»Π½Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ css-in-js, ΠΊΠΎΡΠΎΡΡΠ΅ Π² Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ ΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π°ΡΠΎΠΌΠ°ΡΠ½ΡΡ CSS ΠΈ ΠΌΠ°ΡΠΈΠ½ΠΎΠΏΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°?
Π Π°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π»ΠΈ Π»ΠΈ Π²Ρ Π½ΠΎΠ²ΡΡ Π²ΠΎΠ»Π½Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ css-in-js, ΠΊΠΎΡΠΎΡΡΠ΅ Π² Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ ΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π°ΡΠΎΠΌΠ°ΡΠ½ΡΡ CSS ΠΈ ΠΌΠ°ΡΠΈΠ½ΠΎΠΏΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°?
ΠΠ³ΠΎ Π½Π΅Ρ Π² ΡΠ΅ΡΡΠ΅, Π½ΠΎ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ otion Π² 2-4 ΡΠ°Π·Π° ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅, ΡΠ΅ΠΌ ΡΠΌΠΎΡΠΈΠΈ. Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ Ρ otion Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π», ΠΈ Ρ ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ Π΅ΡΡΡ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ, Π½ΠΎ otion Π΅ΡΠ΅ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ Π³ΠΎΡΠΎΠ² ΠΊ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Ρ.
ΠΠ΄Π½Π°ΠΊΠΎ ΡΠ²Ρ Ρ Π΅ΡΠ΅ Π½Π΅ ΠΏΡΠΎΠ²Π΅ΡΡΠ». π
Π ΠΊΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ ΡΠ΅Π°Π»ΡΠ½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Ρ Π½ΡΠ»Π΅Π²ΡΠΌ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ? Π― Π½Π΅ Π²ΠΈΠ΄Π΅Π», ΡΡΠΎΠ±Ρ ΠΊΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠΏΠΎΠΌΠΈΠ½Π°Π» ΠΎ ΠΠΈΠ½Π°ΡΠΈΠΈ .
Π ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ Ρ Π½Π°ΡΠΊΠ½ΡΠ»ΡΡ Π½Π° Π»ΠΈΠ½Π°ΡΠΈΡ, ΠΈ ΠΎΠ½Π° ΠΌΠ½Π΅ ΠΎΡΠ΅Π½Ρ Π½ΡΠ°Π²ΠΈΡΡΡ. ΠΠ΅Π½Ρ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎ, ΡΡΠΎ ΡΡΠΈΠ»ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ² Π·Π°Π²ΠΈΡΡΡ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
css, ΠΈ Π½Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ IE 11 Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ https://github.com/callstack/linaria/issues/445 Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ styled-components
ΠΈ emotion
ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½ΡΡΠ΅.
@TheHolyWaffle
ΠΠΈΠ½Π°ΡΠΈΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ°Ρ.
ΠΡΠ»ΠΈ Π²Ρ Π½Π°ΡΡΡΠΎΠΈΠ»ΠΈ Π΅Π³ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, Ρ ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ ΠΎΠ½ Π»ΡΡΡΠΈΠΉ ΠΊΠ°ΠΊ ΠΈΠ· css-in-js (Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΎΠΏΡΡΠ° ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ), ΡΠ°ΠΊ ΠΈ ΠΈΠ· ΡΠΈΡΡΠΎΠ³ΠΎ css (Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠ΅Π²Π·ΠΎΠΉΡΠΈ ΡΠΈΡΡΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ css). ΠΠ½ Π΄Π°ΠΆΠ΅ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΡΠ΅Ρ (Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π΄Π΅Π΄ΡΠΏΠ»ΠΈΠΊΠ°ΡΠΈΡ) ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS.
ΠΠΎ Π΄Π»Ρ linaria ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΡΠ°ΠΏ ΡΠ±ΠΎΡΠΊΠΈ ΠΈ ΡΠ±ΠΎΡΠΊΠΈ, ΡΡΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΡΠ»ΠΎΠΆΠ½ΠΎ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ².
Π― Ρ ΠΎΡΠ΅Π» Π±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΠΎΡΡΡ Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ css-in-js Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠΉ ΠΏΠΎΠ²Π΅ΡΡ Π½ΠΎΡΡΡΡ API, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ filbert-js / goober
@kuldeepkeshwar ΠΡ ΡΠΎΠΎΠ±ΡΠΈΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π°Π΄Π°ΠΏΡΠ΅ΡΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ API :)
ΠΠ°ΠΊ Π²ΠΎ Π²ΡΠ΅ ΡΡΠΎ Π²ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ https://compiledcssinjs.com/ ? ΠΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄; Compiled ΡΠ°ΠΊΠΆΠ΅ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ RFC Π΄Π»Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΎΡΠΊΡΡΡΠΎΠ³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΠΈ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ. _ΠΏΠΎΠ΄ΠΌΠΈΠ³ΠΈΠ²Π°Ρ_
Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ Π±ΡΠ΄ΡΡΠ΅Π΅ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° ΠΎΡΠ΅Π½Ρ ΠΈ ΠΎΡΠ΅Π½Ρ ΡΠ²Π΅ΡΠ»ΠΎΠ΅, ΠΈ Ρ Π½Π°Π΄Π΅ΡΡΡ, ΡΡΠΎ Material-UI ΡΡΠ°Π½Π΅Ρ Π½Π΅ΠΎΡΡΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ ΡΠ°ΡΡΡΡ Π³ΠΎΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠ½Π΅ ΠΏΡΠΈΡΠ»ΠΎ Π² Π³ΠΎΠ»ΠΎΠ²Ρ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Compiled :
Π’Π°ΠΊΠΎΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π²Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π»ΡΠ±ΠΎΠΌΡ ΠΏΠΎΡΡΠ΅Π±ΠΈΡΠ΅Π»Ρ, Π½Π΅ ΡΡΠ΅Π±ΡΡ ΠΎΡ Π½Π΅Π³ΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ / Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠ²ΠΎΠΈΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠΎΡΡΠΎ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠΉΡΠ΅ ΠΈ ΡΠ°Π±ΠΎΡΠ°ΠΉΡΠ΅. ΠΡΠΎ ΠΌΠΎΡΠ½ΡΠΉ ΠΈ, ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ, ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΡΠ΅ΠΊΡΡΠΈΠΉ CSS Π² Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°Ρ JS, Π½ΠΎ Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΠ»ΠΎΠ²ΠΊΠΎΠΉ.
_CSS Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΎΠ·Π΄Π°Π½ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ._
ΠΡΠΎ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ Π΄Π»Ρ Π½Π°Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π΄Π²Π΅ΡΠ΅ΠΉ. ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΡΠ±ΠΎΡΠΊΠΈ. ΠΠ°ΡΠ°Π½ΡΠΈΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. Π£ΡΡΡΠ°Π½Π΅Π½Ρ ΡΠ·ΠΊΠΈΠ΅ ΠΌΠ΅ΡΡΠ° Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ.
Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, Ρ Ρ
ΠΎΡΠ΅Π» Π±Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ Ρ
ΠΎΡΠΎΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠ½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ MUI ΠΈ ΠΏΡΠΎΠ΄Π΅Π»Π°Π½Π½Π°Ρ ΡΠ°Π±ΠΎΡΠ°; Π― ΡΠ°ΠΊΠΆΠ΅ ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ ΡΡΠΎ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎ ΠΎΠ½ ΡΡΠ°Π» ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠΌ ΠΏΡΠ΅ΠΌΠΈΡΠΌ-ΠΊΠ»Π°ΡΡΠ°.
ΠΠΎ Π²ΡΠ±ΠΎΡ Β«ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠ³ΠΎΒ» ΠΈΠΌΠ΅Π½ΠΈ ΡΠ°Π΄ΠΈ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΠΈ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°Π·ΡΠΌΠ½ΡΠΌ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠΎΠΌ.
Π― ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π· Π²ΠΈΠ΄Π΅Π», ΠΊΠ°ΠΊ Π½Π° ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ ΡΡΡΠ»Π°Π»ΠΈΡΡ, ΠΈ ΠΌΠ½Π΅ ΠΎΡΠ΅Π½Ρ Π½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ Π΄Π°ΠΆΠ΅ ΡΡΠΈΡΡΠ²Π°Ρ, ΡΡΠΎ x ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π»ΡΠ΄Π΅ΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ x ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΡ - MUI (Π² ΠΌΠΎΠΈΡ
ΠΊΠ½ΠΈΠ³Π°Ρ
) ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ Π½Π° ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ, DX ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π²Π΅ΡΠΈ, Π° Π½Π΅ Π½Π° ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ.
Π£ MUI Π½Π΅ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ»ΠΎ 60 ΡΡΡΡΡ Π·Π²Π΅Π·Π΄, ΠΎΠ½ ΠΈΡ ΠΏΠΎΠ»ΡΡΠ°Π» ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ Π²ΡΠ±ΠΈΡΠ°Π» Π»ΡΡΡΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ (ΠΈΠ»ΠΈ Π±Π»ΠΈΠ·ΠΊΡΡ ΠΊ Π½Π΅ΠΉ), Π° Π½Π΅ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ Π²ΡΠ±ΠΈΡΠ°Π» ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.
ΠΡΠ»ΠΈ Π²ΡΠ±ΠΎΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π²ΡΠ΅Π½Π°ΡΠΎΠ΄Π½ΠΎΠ³ΠΎ Π³ΠΎΠ»ΠΎΡΠΎΠ²Π°Π½ΠΈΡ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΏΡΠΎΠ΅ΠΊΡ Π±ΡΠ΄Π΅Ρ Π±ΠΎΠ»Π΅Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ, ΡΠΎ ΡΡΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π±ΠΈΠ·Π½Π΅ΡΠ°, Π° Π½Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ. ΠΡΠΎΠ΅ΠΊΡ ΠΆΠΈΠ²Π΅Ρ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌΠΈ ΠΈΠ»ΠΈ Π±Π΅Π· Π½ΠΈΡ . ΠΠ½ ΡΠΌΠΈΡΠ°Π΅Ρ Ρ ΠΏΠ»ΠΎΡ ΠΈΠΌ Π²ΡΠ±ΠΎΡΠΎΠΌ. Π― Π΄ΡΠΌΠ°Ρ, Π²ΠΎΠΊΡΡΠ³ ΡΡΠΎΠ³ΠΎ ΡΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΎΠΊ, ΠΈ ΡΡΠ°Π·Π° Β«ΡΡΠΎ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠΎ ΠΏΠ»ΠΎΡ ΠΎΠΉ Π²ΡΠ±ΠΎΡΒ» Π·Π²ΡΡΠΈΡ ΠΊΠ°ΠΊ Π³ΡΠΎΠΌΠΊΠΈΠΉ Π·Π²ΠΎΠ½ΠΎΡΠ΅ΠΊ.
ΠΡΠ΄ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΠΏΡΠΎΠ΄ΡΠΊΡ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΠΎΠ½ Ρ ΠΎΡΠΎΡΠΈΠΉ, Π° Π½Π΅ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ Π² Π½Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ; ΠΠΎΠ³Π΄Π°-ΡΠΎ MUI Π±ΡΠ» Π½ΠΈΡΠ΅Π²ΡΠΌ, Π½ΠΎ ΡΡΠ°Π» ΠΈΠ·Π²Π΅ΡΡΠ½ΡΠΌ, Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ Ρ Π½Π΅Π³ΠΎ Π±ΡΠ» CSS-in-JS, ΠΊΠΎΡΠΎΡΡΠΉ, ΠΊΡΡΠ°ΡΠΈ, Π½Π΅ Π²ΡΠΈΠ³ΡΠ°Π» Π½Π°ΡΠΎΠ΄Π½ΠΎΠ΅ Π³ΠΎΠ»ΠΎΡΠΎΠ²Π°Π½ΠΈΠ΅. Π£ Π½Π΅Π³ΠΎ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΈ ΠΎΠ½ ΡΠ΄Π΅Π»Π°Π» ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ Π²ΡΠ±ΠΎΡ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π΅ Π½Π° ΡΠ΅ΠΊΡΡΠ΅ΠΌ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π΅, Π° Π½Π° ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠΌ DX ΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ.
ΠΡΠΈΠ½ΠΈΠΌΠ°Ρ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅, Ρ ΡΠ°ΠΌ Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ Π²ΡΠ΅Π½Π°ΡΠΎΠ΄Π½ΠΎΠ³ΠΎ Π³ΠΎΠ»ΠΎΡΠΎΠ²Π°Π½ΠΈΡ; ΡΠ°ΠΊ ΡΡΠΎ Π΅ΡΠ»ΠΈ ΡΠΆ Π½Π° ΡΠΎ ΠΏΠΎΡΠ»ΠΎ, Ρ ΡΠΎΠΆΠ΅ ΡΠ°Π±ΠΎΡΠΈΡΡΡ ΡΠ΅Π±Ρ. Π£ ΠΌΠ΅Π½Ρ Π½Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ Π»ΠΈΡΠ½ΠΎΠΉ Π²ΡΠ³ΠΎΠ΄Ρ ΠΎΡ Π²ΡΠ±ΠΎΡΠ° ΠΌΠ΅Π½Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ΄ΡΠΊΡΠ°, Ρ ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡΡΡ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ _ Π²ΠΎΠΎΠ±ΡΠ΅_, ΠΊΠΎΠ³Π΄Π° ΡΠ΅ΡΡ ΠΈΠ΄Π΅Ρ ΠΎ ΡΠ΅Π²ΠΎΠ»ΡΡΠΈΡΡ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΡ . ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΏΠ΅ΡΠ΅ΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΡΡΠΈΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ², ΠΎΡΠ½ΠΎΠ²ΡΠ²Π°ΡΡΡ Π½Π° ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ΠΈ Π΅ΡΡΡ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Π° Π½Π΅ Π½Π° ΡΠΎΠΌ, ΡΡΠΎ Π»ΡΠ΄ΠΈ Π΄ΡΠΌΠ°ΡΡ ΠΎ Π½ΠΈΡ , ΠΈΡΡ ΠΎΠ΄Ρ ΠΈΠ· ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΠΈ Π²Π°ΡΠΈΠ°Π½ΡΠ°.
Π Π·Π°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Ρ ΠΎΡΡ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Ρ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΠ΅Π½ Π·Π° ΠΊΠ°ΠΆΠ΄ΡΡ ΠΌΡΡΠ»Ρ ΠΈ Π·Π° Π»ΡΠ±ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ, ΠΏΠΎΡΡΠ°ΡΠ΅Π½Π½ΠΎΠ΅ Π½Π° MUI. ΠΠ° ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ ΠΏΠ°ΡΡ Π»Π΅Ρ Ρ ΡΠ΄Π΅Π»Π°Π» Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΡ (ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΡΠ°ΡΡΠ½ΡΡ ) ΡΠ΅ΡΠ΅Π½ΠΈΠΉ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ Π²ΡΠ΅ΠΌ ΡΡΠ°Π½Π΄Π°ΡΡΠ°ΠΌ ΠΈ Ρ. Π., ΠΠ° ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠΎΡΠΎΡΡΡ Π² ΠΎΠ΄ΠΈΠ½ΠΎΡΠΊΡ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°Π»ΠΈΡΡ Π±Ρ ΠΌΠ΅ΡΡΡΡ ΠΈΠ»ΠΈ Π³ΠΎΠ΄Ρ! Π― Π½Π΅ ΠΌΠΎΠ³Ρ ΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ²ΠΎΡ ΠΏΡΠΈΠ·Π½Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° ΠΎΡΡΠ°ΠΆΠ°Π»Π°ΡΡ Π½Π° Π±ΡΠΌΠ°Π³Π΅ πββοΈ π πββοΈ
ΠΠ½Π΅ Π»ΡΠ±ΠΎΠΏΡΡΠ½ΠΎ, Π΅ΡΡΡ Π»ΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ Compiled, ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π°Π΄Π°ΠΏΡΠ΅ΡΠ°ΠΌΠΈ ΠΈ Ρ. Π. Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄:
Compiled ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΡΠ΅Ρ Π²Π°Ρ CSS Π² JS Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ±ΠΎΡΠΊΠΈ, ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π°Π½Π°Π»ΠΈΠ·ΠΈΡΡΡ Π²Π°Ρ ΠΊΠΎΠ΄ ΠΈ Π·Π°ΡΠ΅ΠΌ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΡ Π΅Π³ΠΎ Π² ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ. ΠΡΠ΅, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°, Π²ΠΊΠ»ΡΡΠ΅Π½ΠΎ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π½ΠΈΠΌ Π² ΠΏΠ°ΠΊΠ΅Ρ JavaScript.
- ΡΡΠΎ ΠΏΡΡΡ, ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΡΠΎΠΈΡ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ, ΡΡΠΈΡΡΠ²Π°Ρ Π²ΡΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ css Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
Π― Π³ΠΎΠ²ΠΎΡΡ ΡΡΠΎ ΠΊΠ°ΠΊ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡΠΈΠΉ Emotion - Compiled - ΡΡΠΎ Π·Π΄ΠΎΡΠΎΠ²ΠΎ. ΠΠ»ΠΈ, ΡΠΊΠΎΡΠ΅Π΅, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ, ΡΡΠΎ ΠΎΡΠ΅Π½Ρ Π·Π°Ρ Π²Π°ΡΡΠ²Π°ΡΡΠΈΠΉ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π», Π½ΠΎ ΡΡΠΎ Π΅ΡΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°Π½Π½ΠΈΠΉ ΡΡΠ°ΠΏ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΎΠ². Π― ΠΎΡΠ΅Π½Ρ ΡΠΎΠΌΠ½Π΅Π²Π°ΡΡΡ, ΡΡΠΎ MUI ΡΠΌΠΎΠΆΠ΅Ρ Ρ ΡΡΠΈΠΌ ΡΠΏΡΠ°Π²ΠΈΡΡΡΡ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ.
ΠΠΎΠΏΡΠ°Π²ΡΡΠ΅ ΠΌΠ΅Π½Ρ, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΠ±Π°ΡΡΡ, Π½ΠΎ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΡ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅Ρ Π½Π°Π»ΠΈΡΠΈΠ΅ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ ΡΠ°ΠΉΠ» ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Π΄Π»Ρ MUI Π΄Π°ΠΆΠ΅ Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ.
Π― Π±Ρ Π½Π΅ Ρ ΠΎΡΠ΅Π», ΡΡΠΎΠ±Ρ ΠΌΠ΅Π½Ρ Π·Π°ΡΡΠ°Π²Π»ΡΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ MUI. ΠΠ° Π·Π°ΠΌΠ΅ΡΠΊΡ: Π½Π΅ Π±ΡΠ΄Π΅Ρ Π»ΠΈ ΡΡΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠ°ΠΌΠΎΡΠ²Π΅ΡΠ΅Π½Π½ΡΡ Π·Π°Π³ΡΡΠ·ΡΠΈΠΊΠ°Ρ , ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Create React App?
@Andarist ΠΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠΎΠ³Π»Π°ΡΠ΅Π½. Π― Π±Ρ ΠΏΠΎΡΠΎΠ²Π΅ΡΠΎΠ²Π°Π» Π½Π°ΡΠ°ΡΡ ΡΠΎΡΡΡΠ΄Π½ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ»ΠΈ Ρ ΠΎΡΡ Π±Ρ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ ΠΎΠ± ΡΡΠ°ΡΡΠΈΠΈ Π² ΡΠ°Π·Π²ΠΈΡΠΈΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ. ΠΠ½Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΊ ΡΠ΅ΠΌΡ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ! : eyes: ΠΡΠΌΠ°Ρ, ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ - ΠΊΠ°ΠΊ Π²Ρ Π³ΠΎΠ²ΠΎΡΠΈΡΠ΅ - Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ Π±ΡΠ΄Π΅Ρ Π·Π΄ΠΎΡΠΎΠ²ΠΎ. ΠΡΠ»ΠΎ Π±Ρ Π·Π΄ΠΎΡΠΎΠ²ΠΎ, Π΅ΡΠ»ΠΈ Π±Ρ Π±ΠΎΠ»ΡΡΠ΅ Π²Π΅Π»ΠΈΠΊΠΈΡ ΡΠΌΠΎΠ² ΡΠΎΠ±ΡΠ°Π»ΠΈΡΡ Π²ΠΌΠ΅ΡΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ-ΡΠΎ Π²ΡΠ΄Π°ΡΡΠ΅Π΅ΡΡ.
@shilangyu Π― Π½Π΅ ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ Π²Ρ ΠΈΠΌΠ΅Π΅ΡΠ΅ Π² Π²ΠΈΠ΄Ρ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΡΠΎ-ΡΠΎ Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ compiled Π΅ΡΡΡ ΠΎΠ± ΡΡΠΎΠΌ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΊ ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΠΈ Ρ Π½ΡΠ»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠ΅ΠΉ
ΠΡΠ΅ API-ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°ΠΌ Π½ΡΠ°Π²ΡΡΡΡ, Π·Π΄Π΅ΡΡ Π΄Π»Ρ ΠΏΠΎΠ΅Π·Π΄ΠΊΠΈ - CSS prop ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΈΠΌΠ΅Π½ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠΎΠΆΠ΅! ΠΠ°ΡΠΈΠΌ ΠΏΠΎΡΡΠ΅Π±ΠΈΡΠ΅Π»ΡΠΌ Π΄Π°ΠΆΠ΅ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡΡ ΡΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΏΠΎΡΡΠ΅Π±Π»ΡΡΡ Π½Π°ΡΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ ΠΈΡΡΠΎΡΠΈΡ Π½ΡΠ»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ, ΠΈΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ±ΠΎΡΡΠΈΠΊ, ΠΈ ΠΈΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠ΅ Π²Π΅ΡΠΈ Π΄Π»Ρ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ ΡΠ΅ΡΠ²Π΅ΡΠ°. ΠΡΠΎΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
Π’ΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΠ°Π»ΠΎ
Π‘ Π½ΡΠ»Π΅Π²ΠΎΠΉ Π³ΠΎΡΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠ΅ΠΉ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ Π½Π΅ Π·Π°Π±ΡΠ²Π°Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π·Π°Π²ΡΡΠ°. ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈΠ·Π²Π»Π΅ΡΠ΅Π½ΠΈΡ CSS, ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ CSS Π² Π°ΡΠΎΠΌΠ°ΡΠ½ΡΡ ΡΠΎΡΠΌΡ ΠΈ Π΄Π°ΠΆΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π°Π½Π½ΡΠ΅ CSS Π΄Π»Ρ Π°Π½Π°Π»ΠΈΠ·Π° Π²ΡΠ΅ΠΉ Π½Π°ΡΠ΅ΠΉ Π±Π°Π·Ρ ΠΊΠΎΠ΄Π°, ΠΌΡ ΠΏΡΠΈΠ΄ΡΠΌΡΠ²Π°Π΅ΠΌ Π·Π°Ρ Π²Π°ΡΡΠ²Π°ΡΡΠ΅Π΅ Π·Π°Π²ΡΡΠ°.
@MathiasKandelborg
Π― ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅Π» https://compiledcssinjs.com/ . Π Π°Π·Π²Π΅ ΡΡΠΎ Π½Π΅ Π²ΡΠ΅ Π΅ΡΠ΅ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ css-in-js?
ΠΠ½ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΊΠ»Π°ΡΡΡ css Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ±ΠΎΡΠΊΠΈ, Π½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΡΡΠΎΡ ΡΡΠΈΠ»Ρ (ΡΠΎΠ·Π΄Π°Π΅Ρ ΡΠ΅Π³ ΡΡΠΈΠ»Ρ Ρ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ css, ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ±ΠΎΡΠΊΠΈ) Ρ ΡΠ΅Π³ΠΎΠΌ <CC>...</CC>
Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
ΠΡΠ»ΠΈ ΡΡΠΎ ΡΠ°ΠΊ ΠΆΠ΅ Π±ΡΡΡΡΠΎ, ΠΊΠ°ΠΊ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΡΡΠΎΠ³ΠΎ css, ΡΠΎ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±ΡΠ΄ΡΡΠ΅Π΅ (ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ css). Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ, ΡΡΠΎ ΠΏΠΎΠ΄Π΅Π»ΠΈΠ»ΡΡ
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ½ Π±ΡΡΡΡΠ΅Π΅ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ Emotion.
Π ΠΊΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ ΡΠ΅Π°Π»ΡΠ½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Ρ Π½ΡΠ»Π΅Π²ΡΠΌ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ? Π― Π½Π΅ Π²ΠΈΠ΄Π΅Π», ΡΡΠΎΠ±Ρ ΠΊΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠΏΠΎΠΌΠΈΠ½Π°Π» ΠΎ ΠΠΈΠ½Π°ΡΠΈΠΈ.
Π§ΡΠΎ ΠΌΡ Π½Π΅ Π²ΠΊΠ»ΡΡΠΈΠ»ΠΈ Π² ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ, ΡΠ°ΠΊ ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π»ΡΠ±ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ Π½ΡΠ»Π΅Π²ΡΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΏΠΎΡΡΠ΅Π±ΠΈΡΠ΅Π»Π΅ΠΉ Material-UI. ΠΡΠ»ΠΈ Ρ ΠΏΠΎΠ½ΡΠ» ΡΠ΅ΡΠ΅Π½ΠΈΡ Ρ Π½ΡΠ»Π΅Π²ΡΠΌ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΠΎΠ½ΠΈ Π³Π΅Π½Π΅ΡΠΈΡΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ CSS Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ. Π Π°Π·Π²Π΅ ΠΌΠ½Π΅ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π΅Π³ΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ?
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Ρ ΠΎΡΡ Π½ΡΠ»Π΅Π²ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΠΌΡΠΌ Π±ΡΡΡΡΡΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΎΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΡΡΠ΅Π±ΡΠ΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ. ΠΡΠΌΠ°Ρ, ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Ρ Π½ΡΠ»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Π½ΡΠ»Π΅Π²ΡΠΌ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Ρ ΠΎΡΡ Π½ΡΠ»Π΅Π²ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΠΌΡΠΌ Π±ΡΡΡΡΡΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΎΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΡΡΠ΅Π±ΡΠ΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ. ΠΡΠΌΠ°Ρ, ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Ρ Π½ΡΠ»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Π½ΡΠ»Π΅Π²ΡΠΌ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
ΠΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΌΠΎΠ³Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Compiled, Π½ΠΎ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· Π³ΠΎΠ²ΠΎΡΠΈΠ» ΠΎΠ± ΡΡΠΎΠΌ Ρ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡΠΈΠΌ, ΠΈ ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΠΏΠ»Π°Π½ - ΠΈΠ΄Π΅Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ API Emotion & Styled Components, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ Π½Π°ΠΏΠΈΡΠ°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΏΡΠΎΡΡΠΎ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΠΌΠΏΠΎΡΡΠ° ΠΈ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Π° ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ»ΠΈ Π·Π°Π³ΡΡΠ·ΡΠΈΠΊΠ° Π²Π΅Π±-ΠΏΠ°ΠΊΠ΅ΡΠΎΠ². ΠΠ½, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π²Π΅ΡΡ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π°ΠΏΠΈΡΠ°Π½ (JS - Π΄ΠΈΠΊΠΈΠΉ), Π½ΠΎ ΠΎΠ½ ΡΠΌΠΎΠΆΠ΅Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΡΠ°Π·ΡΠΌΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΠΉ ΠΊΠΎΠ΄. ΠΡΠ»ΠΈ ΠΎΠ½ Π½Π΅ ΡΠΌΠΎΠΆΠ΅Ρ ΡΡΠΎ-ΡΠΎ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°ΡΡ, ΡΠ°ΠΉΠ». ΠΠ½ ΠΏΡΠΎΡΡΠΎ Π±ΡΠΎΡΠΈΡ - Π·Π°ΡΡΠ°Π²Π»ΡΡ ΠΎΡΠΊΠ°Π·Π°ΡΡΡΡ ΠΎΡ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΡΠ²Π°Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠ°ΡΡΡ ΠΊΠΎΠ΄Π°, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌΡ Π°Π½Π°Π»ΠΈΠ·Ρ.
ΠΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ΄Π²Π΅ΡΡΠΈ ΠΈΡΠΎΠ³ - Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ 0config Emotion (ΠΈΠ»ΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ), ΡΠΎΠ³Π΄Π° Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ Compiled Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ (Π΅ΡΠ»ΠΈ ΠΏΡΠΎΠ΅ΠΊΡ ΡΠΌΠΎΠΆΠ΅Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ ΠΎΠ±Π΅ΡΠ°Π΅Ρ)
@ ko-toss Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΠΎΠ½ ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΡΠ΅ΡΡΡ Π² ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ±ΠΎΡΠΊΠΈ. ΠΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΡΠΈΠ»ΠΈ ΠΈΠ· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Π·Π°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π½Π° ΡΠ²ΠΎΠ΅ Π·Π°ΠΊΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ.
ΠΠ°ΠΊ Π³ΠΎΠ²ΠΎΡΠΈΡΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅:
ΠΡΠ΅, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°, Π²ΠΊΠ»ΡΡΠ΅Π½ΠΎ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π½ΠΈΠΌ Π² ΠΏΠ°ΠΊΠ΅Ρ JavaScript.
ΠΠ΅ΡΠ΅ΠΌ Π²Π°Ρ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π²ΠΎ Π²ΡΠ΅ΠΉ ΠΊΡΠ°ΡΠ΅:
import { styled } from '@compiled/css-in-js';
export const ColoredText = styled.span`
color: #ff5630;
`;
Π Π·Π°ΡΠ΅ΠΌ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ:
...
...
ΠΠ°ΡΠ΅ΠΌ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΡΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΡΡΡΡ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
Π’Π°ΠΊΠΎΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π²Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π»ΡΠ±ΠΎΠΌΡ ΠΏΠΎΡΡΠ΅Π±ΠΈΡΠ΅Π»Ρ, Π½Π΅ ΡΡΠ΅Π±ΡΡ ΠΎΡ Π½Π΅Π³ΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ / Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠ²ΠΎΠΈΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠΎΡΡΠΎ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠΉΡΠ΅ ΠΈ ΡΠ°Π±ΠΎΡΠ°ΠΉΡΠ΅. ΠΡΠΎ ΠΌΠΎΡΠ½ΠΎ ΠΈ, ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ, ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ΅ΠΊΡΡΠΈΠΉ CSS Π² Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°Ρ JS - Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΠ»ΠΎΠ²ΠΊΠΎΠΉ.
CSS Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΎΠ·Π΄Π°Π½ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
ΠΡΠΌΠ°Ρ, ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Ρ Π½ΡΠ»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Π½ΡΠ»Π΅Π²ΡΠΌ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
Π― Π΄ΡΠΌΠ°Ρ, Π²Ρ ΠΏΠΎΠΏΠ°Π»ΠΈ Π² ΡΠ°ΠΌΡΡ ΡΠΎΡΠΊΡ. ΠΡΠ»ΠΎ Π±Ρ ΡΡΠΎΠΏΠΈΡΠ½ΠΎ Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ, Π½Π΅ΠΆΠ½ΠΎ ΠΌΠ΅ΡΡΠ°Ρ .
ΠΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ΄Π΅ΠΈ Π΄Π»Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΊΠ°ΠΊΠΎΠ΅-ΡΠΎ ΡΠΎΡΡΡΠ΄Π½ΠΈΡΠ΅ΡΡΠ²ΠΎ. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΠΎΠ΄Ρ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ ΠΌΠ½Π΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΠΆΠ΄Ρ, ΠΏΠΎΡΡΠΎΠΌΡ Ρ Π½Π΅ ΠΌΠΎΠ³Ρ Π²Π΄Π°Π²Π°ΡΡΡΡ Π² ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ. ΠΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π΅ΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠ΅Π½Ρ Π²ΠΎΠ»Π½ΡΡΡ:
Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ IE11, ΠΊΠ°ΠΊ Π²Ρ ΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΡΠ°ΡΠΈΡΡΠΈΠΊΡ? Π― ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ ΡΡΠΎ Π²ΠΏΠΎΠ»Π½Π΅ ΠΆΠΈΠ·Π½Π΅ΡΠΏΠΎΡΠΎΠ±Π½ΡΠΉ ΠΏΠΎΡΡΡΠΏΠΎΠΊ. Edge ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° Ρ ΡΠΎΠΌΠ΅, ΠΈ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΏΡΠ΅Π΄ΠΏΡΠΈΡΡΠΈΠΉ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄, ΠΊΠΎΠ³Π΄Π° MS ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠ΅ΠΊΡΠ°ΡΠΈΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ IE, ΠΊΠΎΠ³Π΄Π° ΠΊΠ°ΠΆΠ΄Π°Ρ ΠΠ‘, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ Π±ΡΠ» ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ IE11, ΠΏΠΎΠ΄ΠΎΡΠ»Π° ΠΊ ΠΊΠΎΠ½ΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΈΠΊΠ»Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ. ΠΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ»Π³ΠΈΠΉ ΡΠΈΠΊΠ», Π½ΠΎ Ρ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡΠΈΠ΅ ΡΠΎΠΆΠ΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΡΠ°ΡΡΠΈΠ΅ Π² ΠΏΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, ΠΈ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΡΠ΅Π³ΠΎ-ΡΠΎ, ΡΡΠΎ ΠΏΠΎ ΡΡΡΠ΅ΡΡΠ²Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΌ, ΠΏΠΎΡ ΠΎΠΆΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π»ΡΠ΄ΡΠΌ ΠΆΠ΄Π°ΡΡ, ΠΏΠΎΠΊΠ° Β«ΡΠ΄Π²ΠΈΠ³Β» Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ.
ΠΡΠ»ΠΎ Π±Ρ Π½Π΅ΠΏΠ»ΠΎΡ ΠΎ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ IE11. ΠΡΠΎ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΎΡΡΠ°ΡΠ»Π΅Π²ΠΎΠΉ ΡΡΠ°Π½Π΄Π°ΡΡ, ΠΈ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΌ. ΠΡΠΎ Π²ΠΎΠΏΡΠΎΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° _default_ ΡΠ°ΠΊΠΈΡ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π²Π΅ΡΠ΅ΠΉ, ΠΊΠ°ΠΊ MUI, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ΄Π²ΠΈΠ³.
ΠΡΠ»ΠΎ Π±Ρ Π½Π΅ΠΏΠ»ΠΎΡ ΠΎ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ IE11.
Π‘ΠΌ. Https://github.com/mui-org/material-ui/issues/14420 Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ.
ΠΡ Π½Π΅ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΠΌ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΡΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ ΠΎΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ IE. ΠΠ΅ΡΡΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π½Π΅ Π±ΡΠ΄Π΅Ρ Π½Π°ΡΠ΅Π»Π΅Π½Π° Π½Π° IE 11 Π² v5, Π½ΠΎ ΠΌΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² IE 11. ΠΠ»ΠΈ, ΡΠΊΠΎΡΠ΅Π΅, ΡΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ±ΠΎΡΠΊΠΈ ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅. Π²ΡΠ²ΠΎΠ΄.
ΠΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΌΠ΅Π½Ρ ΡΡΠ°ΡΡΠ»ΠΈΠ²ΠΎΠΉ.
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, Π΅ΡΡΡ Π»ΠΈ ΠΌΠΎΠ΄ ΠΊΠΎΠ΄Π° Π΄Π»Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π³ΠΎ jss Π² ΡΡΠΈΠ»ΠΈ / ΡΠΌΠΎΡΠΈΠΈ?
ΠΡΠΈΠ²Π΅Ρ Π²ΡΠ΅ΠΌ. Π― ΠΏΠΎΠ»ΡΠ·ΡΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ, ΡΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ ΡΡΠΎ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΠ΅.
Π ΡΠ΅ΠΊΡΡΠ΅ΠΉ Π²Π΅ΡΡΠΈΠΈ Material UI ΠΈΠ½ΡΠ΅Π½ΡΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ withStyles
HOC Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ
-Π»ΠΈΠ±ΠΎ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΡΠΈΠ»Π΅ΠΉ (ΡΡΠΈΠ»Ρ - ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ²ΠΎΠΉΡΡΠ²), ΠΊΠΎΡΠΎΡΡΠΉ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ makeStyles
. ΠΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ makeStyles
(Π±Π΅Π· Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ²) Π²Π΅ΡΡΠΌΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½Π°, Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° ΠΌΠΎΠ³ Π±Ρ Π±ΡΡΡ Π΄Π°ΠΆΠ΅ Π±ΡΡΡΡΠ΅Π΅, Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π΅Π³ΠΎ Π½Π°ΠΏΡΡΠΌΡΡ, Π²ΠΌΠ΅ΡΡΠΎ withStyles
, ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½Π΅Π½ΡΠΆΠ½ΡΡ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΡ.
Π― ΡΠΎΠ·Π΄Π°Π» ΡΠ΅ΡΡΠΎΠ²ΡΡ Π²Π΅ΡΠ²Ρ ΡΡΠΎΠ³ΠΎ ΡΠ΅ΡΡΠ° ΠΈ ΡΠ°Π·Π²Π΅ΡΠ½ΡΠ» Π΅Π³ΠΎ Π² Vercel, ΡΠ°ΠΊ ΡΡΠΎ Π²Π΅ΡΡ ΠΊΠΎΠ΄ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½ Ρ Π²ΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΌΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΡΠΌΠΈ ΡΠ»Π°Π³Π°ΠΌΠΈ. Π’Π΅ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΊΠ°ΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ°Π·Π½ΡΡ CSS Π² Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°Ρ JSS. ΠΠΎΡ ΡΡΡΠ»ΠΊΠΈ:
ΠΠ° 100 ΠΊΠ°ΡΡ :
makeStyles
: https://csb-5z6e2-lh4u8acll.vercel.app/?cases=mui-make-styles&cards=100emotion
: https://csb-5z6e2-lh4u8acll.vercel.app/?cases=emotion-styled&cards=100styled-components
: https://csb-5z6e2-lh4u8acll.vercel.app/?cases=styled-components&cards=100ΠΠ° 500 ΠΊΠ°ΡΡ :
makeStyles
: https://csb-5z6e2-lh4u8acll.vercel.app/?cases=mui-make-styles&cards=500emotion
: https://csb-5z6e2-lh4u8acll.vercel.app/?cases=emotion-styled&cards=500styled-components
: https://csb-5z6e2-lh4u8acll.vercel.app/?cases=styled-components&cards=500ΠΠ»Ρ 2500 ΠΊΠ°ΡΡ :
makeStyles
: https://csb-5z6e2-fqtfkzcrk.vercel.app/?cases=mui-make-styles&cards=2500emotion
: https://csb-5z6e2-fqtfkzcrk.vercel.app/?cases=emotion-styled&cards=2500styled-components
: https://csb-5z6e2-fqtfkzcrk.vercel.app/?cases=styled-components&cards=2500Π ΡΠ΅Π»ΠΎΠΌ, emotion
ΠΈ styled-components
ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ
ΠΎΠΆΠΈ ΠΏΠΎ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, makeStyles
ΠΊΠ°ΠΆΠ΅ΡΡΡ Π² 2-4 ΡΠ°Π·Π° Π±ΡΡΡΡΠ΅Π΅ ΠΏΡΠΈ ΠΌΠΎΠ½ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ Π±ΡΡΡΡΠ΅Π΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²ΡΠ²Π°Π΅Ρ 6-8x
Π΄Π»Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ.
Π Π°Π·Π½ΠΈΡΠ° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΊΠΎΠ³Π΄Π° ΠΌΡ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΠΌ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ Π½ΠΈΠ·ΠΊΠΈΠΌ ΡΠ½Π΅ΡΠ³ΠΎΠΏΠΎΡΡΠ΅Π±Π»Π΅Π½ΠΈΠ΅ΠΌ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Π½Π°ΡΠΈ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ ... ΠΈ Π΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΡΠ½Π½ΡΡ ΡΠ΅Π»Π΅ΡΠΎΠ½ΠΎΠ².
ΠΡΠ΅ ΡΡΠΎ Π³ΠΎΠ²ΠΎΡΠΈΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΌΠ΅Π½Ρ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ emotion
, ΡΡΠΎ ΡΠ½ΠΈΠ·ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² ΠΈ ΡΠ°ΠΉΡΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΡ
Π΅Π³ΠΎ, Π² 3-5 ΡΠ°Π·. (ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΡΠΎ Π½Π΅ ΡΠ°ΠΊ, ΡΡΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°; ΡΠ΅ΠΌ ΠΎΠ½ ΡΠ»ΠΎΠΆΠ½Π΅Π΅, ΡΠ΅ΠΌ ΠΌΠ΅Π½ΡΡΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·Π»ΠΈΡΠΈΠΉ).
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ ΠΈ ΠΏΠΈΡΠ° Π΄Π»Ρ ΡΠ°Π·ΠΌΡΡΠ»Π΅Π½ΠΈΠΉ:
makeStyles
makeStyles
ΡΠ²ΡΠ·Π°Π½Π° Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅, ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ, ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π² Π΄Π΅ΡΠ΅ΡΠΌΠΈΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΠΊΠ΅ΡΠ°. Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ Π΄Π»Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ², Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈ ΡΡΠΈΠ»ΠΈ Π²ΡΠ²ΠΎΠ΄Π° ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ, ΡΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ Π½Π°ΠΊΠ»Π°Π΄Π½ΡΠΌ ΡΠ°ΡΡ
ΠΎΠ΄Π°ΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Ρ ΡΠ΅Π³ΠΎΠ² ΡΡΠΈΠ»Π΅ΠΉ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ ΠΈ ΡΠ½ΠΈΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ SSR. ΠΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΡΠ°ΡΠ΅Π³ΠΈΡ Ρ
Π΅ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΡΠΈΠ»Π΅ΠΉ, ΠΊΠ°ΠΊ ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ CSS Π² JS-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°Ρ
. ΠΠΎ ΡΠ΅ΠΌΠ΅: https://github.com/mui-org/material-ui/pull/16858emotion
ΠΈ styled-components
ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ±Π»ΠΈΠ·ΠΈΡΡΡΡ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΡΡΠ°ΡΡ Π»ΡΡΡΠ΅, ΡΠ΅ΠΌ makeStyles
?Π― ΠΌΠΎΠ³Ρ ΠΆΠΈΡΡ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΠΎΡΠ΅ΡΠ΅ΠΉ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ.
ΠΠΈ 300% ΠΏΠΎΡΠ΅ΡΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, Π½ΠΈ Π»ΡΠ±ΠΎΠΉ ΡΠ΅Π½ΠΎΠΉ. π
@satazor Π±Π»Π°Π³ΠΎΠ΄Π°ΡΠΈΡ Π·Π° ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ. ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ Π½Π°ΡΠ°ΡΡ ΡΡΡ ΡΠ°Π±ΠΎΡΡ, ΠΌΡ ΠΏΡΠΎΠ²Π΅Π»ΠΈ ΡΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, ΡΠΌ. PR https://github.com/mui-org/material-ui/pull/22173 Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ (ΠΌΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΡΡΠΎ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ListItem), ΠΈ ΡΠ°Π·Π½ΠΈΡΠ° Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π±ΡΠ»Π° Π½Π° ΡΡΠΎΠ²Π½Π΅ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌ 10% Π΄Π»Ρ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠΎΠ² x1000 Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ .
https://deploy-preview-22173--material-ui.netlify.app/performance/list-raw/
https://deploy-preview-22173--material-ui.netlify.app/performance/list-mui/
https://deploy-preview-22173--material-ui.netlify.app/performance/list-styled/
https://deploy-preview-22173--material-ui.netlify.app/performance/list-styled-wrapper/
ΠΡΡ ΠΎΠ΄Ρ ΠΈΠ· ΡΡΠΎΠ³ΠΎ, ΠΌΡ ΡΠ΅ΡΠΈΠ»ΠΈ ΠΏΡΠΎΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡ ΡΠ°Π·Π½ΠΈΡΡ ΠΈΠ·-Π·Π° ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠΌ (Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈΠ· ΠΊΠΎΡΠΎΠ±ΠΊΠΈ, ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠΉ API, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΈ Ρ. Π. - Π²Π΅ΡΡ ΠΎΠ±Π·ΠΎΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π² PR ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ :))
ΠΠ΅ ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ Π² Π²Π°ΡΠΈΡ
ΡΠ΅ΡΡΠ°Ρ
, Π½ΠΎ 3-5x ΠΌΠ½Π΅ ΠΊΠ°ΠΆΠ΅ΡΡΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΈΠΌ, ΡΡΠΎ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΌΠ΅Π½Ρ Π·Π°Π΄Π°ΡΡΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ, Π·Π°ΡΠ΅ΠΌ ΠΊΠΎΠΌΡ-ΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ emotion
/ styled-compoenents
Π΅ΡΠ»ΠΈ Π±Ρ ΡΡΠΎ Π±ΡΠ»ΠΎ ΡΠ°ΠΊ ... ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, Π² ΡΠ΅ΠΌ ΡΠ°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ ΡΠ΅ΡΡΠ°ΠΌΠΈ, Π½Π° ΡΠ»ΡΡΠ°ΠΉ, Π΅ΡΠ»ΠΈ ΠΌΡ ΡΠ΅Π³ΠΎ-ΡΠΎ ΡΠΏΡΡΡΠΈΠ»ΠΈ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π½Π° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄, Π±ΡΠ»ΠΎ Π±Ρ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡΡΡΠ΅ ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΡΡ ΡΠ΅ΡΡΡ Π½Π° ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ MUI, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠΌ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅Π°Π»ΠΈΡΡΠΈΡΠ½ΡΠ΅ ΡΠΈΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π°ΠΉΡΠ΅ ΠΌΠ½Π΅ Π·Π½Π°ΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΈΠ·ΡΡΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅ Ρ ΡΡΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ. Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΌΠ½ΠΎΠΉ PR ΡΠ²Π»ΡΠ΅ΡΡΡ Ρ
ΠΎΡΠΎΡΠ΅ΠΉ ΠΎΡΠΏΡΠ°Π²Π½ΠΎΠΉ ΡΠΎΡΠΊΠΎΠΉ.
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΠΎΡΠ²Π΅Ρ @mnajdova. ΠΡ ΠΏΡΠ°Π²Ρ, ΡΡΠΎ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ Mui Π±ΡΠ»ΠΎ Π±Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅Π°Π»ΠΈΡΡΠΈΡΠ½ΡΠΌ. ΠΠ΅ΡΠΎΡΡΠ½ΠΎ, ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΎ, ΡΡΠΎ ΠΊΠΎΠ΄ Mui Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² List ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠ΅ΠΎΠ±Π»Π°Π΄Π°ΡΡΠΈΠΌ ΡΠ°ΠΊΡΠΎΡΠΎΠΌ Π·Π°ΠΌΠ΅Π΄Π»Π΅Π½ΠΈΡ, Π° ΡΠ°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ (~ 30 ΠΌΡ) - ΡΡΠΎ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠ°Π·Π½ΠΈΡΠ° Π²ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π°, ΡΠ²ΡΠ·Π°Π½Π½Π°Ρ ΡΠΎ ΡΡΠΈΠ»ΡΠΌΠΈ. Π― Π²ΠΎΠ·ΡΠΌΡ ΠΊΠΎΠ΄ ΡΡΠΎΠ³ΠΎ PR ΠΈ Π΄ΠΎΠ±Π°Π²Π»Ρ Π΅Π³ΠΎ Π² ΡΠ΅ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ.
ΠΡΠ΄Π΅Ρ Π»ΠΈ ΡΡΠΎ ΠΈΠΌΠ΅ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠΎΠ²? ΠΠ°Π²Π΅ΡΠ½ΠΎΠ΅, Π½Π΅Ρ, Π½ΠΎ ΡΡΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. Π Π°Π·Π½ΠΈΡΠ° Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅ΠΊΡΡΠΈΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ Mui ΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠΌΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΏΡΠΎΡΠ΅Π½ΠΈΡ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π°. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° Ρ ΠΎΠΆΠΈΠ΄Π°Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΠΉ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°Ρ Icon ΠΈ Typography, Π½ΠΎ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΠΉ Π΄Π»Ρ ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ. ΠΡΠ°ΠΊ, ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ.
ΡΡΠΎ ΡΠ½ΠΈΠ·ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° ΠΈ ΡΠ°ΠΉΡΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΡ Π΅Π³ΠΎ, Π² 3-5 ΡΠ°Π·.
ΠΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠ΅ΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΡΠΎΡ ΡΠ°ΠΊΡΠΎΡ. ΠΠ· ΡΡΠΎΠ³ΠΎ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎ ΡΠ½ΠΈΠΆΠ΅Π½ΠΈΠ΅. ΠΠΎΡΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ Π½Π΅ Π΄Π΅Π»Π°ΡΡ ΠΏΠΎΡΠΏΠ΅ΡΠ½ΡΡ Π²ΡΠ²ΠΎΠ΄ΠΎΠ², ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ° Π²Π²ΠΎΠ΄ΡΡΠ°Ρ Π² Π·Π°Π±Π»ΡΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ ΠΈΠ· ΡΠ°ΠΊΠΎΠΉ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ devtools, Ρ ΡΠ²ΠΈΠ΄Π΅Π» 140 ΠΌΡ Π΄Π»Ρ ΠΌΠΎΠ½ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ ΡΠΌΠΎΡΠΈΡΠΌΠΈ ΠΈ 120 ΠΌΡ Π΄Π»Ρ ΠΌΠΎΠ½ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ makeStyles.
ΠΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠ΅ΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΡΠΎΡ ΡΠ°ΠΊΡΠΎΡ. ΠΠ· ΡΡΠΎΠ³ΠΎ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎ ΡΠ½ΠΈΠΆΠ΅Π½ΠΈΠ΅. ΠΠΎΡΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ Π½Π΅ Π΄Π΅Π»Π°ΡΡ ΠΏΠΎΡΠΏΠ΅ΡΠ½ΡΡ Π²ΡΠ²ΠΎΠ΄ΠΎΠ², ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ° Π²Π²ΠΎΠ΄ΡΡΠ°Ρ Π² Π·Π°Π±Π»ΡΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ ΠΈΠ· ΡΠ°ΠΊΠΎΠΉ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
ΠΡ ΠΏΡΠ°Π²Ρ, ΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΌΠΎΠΉ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ.
ΠΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠ΅ΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΡΠΎΡ ΡΠ°ΠΊΡΠΎΡ. ΠΠ· ΡΡΠΎΠ³ΠΎ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎ ΡΠ½ΠΈΠΆΠ΅Π½ΠΈΠ΅. ΠΠΎΡΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ Π½Π΅ Π΄Π΅Π»Π°ΡΡ ΠΏΠΎΡΠΏΠ΅ΡΠ½ΡΡ Π²ΡΠ²ΠΎΠ΄ΠΎΠ², ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ° Π²Π²ΠΎΠ΄ΡΡΠ°Ρ Π² Π·Π°Π±Π»ΡΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ ΠΈΠ· ΡΠ°ΠΊΠΎΠΉ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ devtools, Ρ ΡΠ²ΠΈΠ΄Π΅Π» 140 ΠΌΡ Π΄Π»Ρ ΠΌΠΎΠ½ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ ΡΠΌΠΎΡΠΈΡΠΌΠΈ ΠΈ 120 ΠΌΡ Π΄Π»Ρ ΠΌΠΎΠ½ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ makeStyles.
Π― ΠΎΠ±Π½ΠΎΠ²ΠΈΠ» ΡΠ΅ΡΡ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ actualDuration
Π²ΠΌΠ΅ΡΡΠΎ baseDuration
, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ΅ΠΏΠ΅ΡΡ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΈΠ΄Π΅ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΡΠΎΠΌΡ, ΡΡΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠΎΡΠΈΠ»ΠΈΡΠΎΠ²ΡΠΈΠΊΠ΅ devtools. baseDuration
ΠΈΠ·ΠΌΠ΅ΡΡΠ΅Ρ Π²ΡΠ΅ΠΌΡ Π±Π΅Π· ΠΌΠ΅ΠΌΠΎΠΈΠ·Π°ΡΠΈΠΈ, Π° actualDuration
- Π½Π°ΠΎΠ±ΠΎΡΠΎΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²Π»ΠΈΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π°, ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ Ρ Π²ΠΈΠΆΡ, ΡΡΠΎ makeStyles
6-8 ΡΠ°Π· Π±ΡΡΡΡΠ΅Π΅ Π΄Π»Ρ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π°, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Π»ΡΡΡΠ΅Π΅ ΠΊΠ΅ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ / ΠΌΠ΅ΠΌΠΎΠΈΠ·Π°ΡΠΈΡ? ΠΠ΄Π½Π°ΠΊΠΎ Ρ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ ΡΠ΅Ρ
ΡΠ΅Π½Π½ΠΎΡΡΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅. ΠΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΠΏΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ ΡΡΡΠ»ΠΊΠ°ΠΌ?
@satazor Π― Π½Π΅ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ Π²Π°ΡΠΈ ΡΠ΅ΡΡΠΎΠ²ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½Ρ. Π£ Π½Π°Ρ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Ρ ΠΎΡΠΎΡΠΎ.
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΡΠ°ΡΡΡΡ ΠΏΠΎΠ½ΡΡΡ, ΠΈ ΡΡΠΎ ΡΠΌΠ΅Π½ΡΡΠΈΡ ΡΠ°Π·Π½ΠΈΡΡ Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ:
<MenuItem>
ΠΏΠΎΡΡΠΈ Π² 10 ΡΠ°Π· ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅, ΡΠ΅ΠΌ <li>
).ΠΠ΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, @oliviertassinari. ΠΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ Ρ Emotion / Styled-components Π±ΠΎΠ»ΡΡΠ΅ Π² ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΊΠΎΡΡΡΠΈΡΠΈΠ΅Π½ΡΠ΅ 1.5x-2x Π΄Π°ΠΆΠ΅ Π΄Π»Ρ ΠΏΡΠΎΡΡΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ Typography
, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π» Π·Π΄Π΅ΡΡ: https://codesandbox.io/ s / css-in-js-compare-forked-lr3sr? file = / src / components / EmotionTypography.js.
ΠΡΠΎΠ²Π΅ΡΡΡΠ΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΡΡ ΡΠ±ΠΎΡΠΊΡ ΠΈ ΡΠ΅ΡΡ ΠΏΠΎ Π°Π΄ΡΠ΅ΡΡ: https://csb-lr3sr-7lp24bj5l.vercel.app/
makeStyles
Π² 1,5-2 ΡΠ°Π·Π° Π±ΡΡΡΡΠ΅Π΅ ΠΏΡΠΈ ΠΌΠΎΠ½ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ Π² 3-4 ΡΠ°Π·Π° Π±ΡΡΡΡΠ΅Π΅ ΠΏΡΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠΌ ΡΠ΅Π½Π΄Π΅ΡΠ΅. ΠΡΠΎ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎ ΡΠΎ, Π·Π° ΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ»Π΅Π΄ΠΈΡΡ, Π½ΠΎ Ρ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΠΎΡΠΊΠ»ΠΎΠ½Π΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½ΡΡΠ΅ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ².
ΠΡΠ°ΠΊ, Π² Π·Π°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅, Ρ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΡΡΡ ΠΎ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΈ Ρ Π½Π΅ΡΠ΅ΡΠΏΠ΅Π½ΠΈΠ΅ΠΌ ΠΆΠ΄Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ.
@mnajdova ΠΠΎΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π΅Π½Π½Π°Ρ ΡΠ±ΠΎΡΠΊΠ° Π΄Π»Ρ ΡΠ΅ΡΡΠ° List: https://csb-lr3sr-3zi42510w.vercel.app/?components=1000 , ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΎ ΠΈΠ· ΡΠΏΠΎΠΌΡΠ½ΡΡΠΎΠ³ΠΎ Π²Π°ΠΌΠΈ PR. Π‘ΡΡΠ»ΠΊΠ° Codesandbox: https://codesandbox.io/s/css-in-js-comparison-forked-6s4nl
makeStyles
ΠΊΠ°ΠΆΠ΅ΡΡΡ Π² 1,7 ΡΠ°Π·Π° Π±ΡΡΡΡΠ΅Π΅ ΠΏΡΠΈ ΠΌΠΎΠ½ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ Π² 2,2 ΡΠ°Π·Π° Π±ΡΡΡΡΠ΅Π΅ ΠΏΡΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠΉ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ. Π― Π½Π΅ Π²ΠΈΠΆΡ ΡΠΎΠΉ ΡΠ°Π·Π½ΠΈΡΡ Π² 10%, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅. Π― Π΄Π΅Π»Π°Ρ ΡΡΠΎ-ΡΠΎ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ?
@satazor ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΡΠΏΠ°ΡΠΈΠ±ΠΎ, ΡΡΠΎ
import Slider from '@material-ui/core/Slider';
vs (ΡΠΌΠΎΡΠΈΡ).
import SliderStyled from '@material-ui/lab/SliderStyled';
vs (ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ).
import SliderStyled from '@material-ui/lab/SliderStyled';
ΠΠ° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΡΡΡΠ΄Π½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΠΏΠΎΡΠ΅ΠΌΡ ΠΎΠ½ ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅. Π£Π·ΠΊΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ Π² ΡΡΠΈΠ»ΡΡ . Π ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ Ρ Π·Π°ΠΏΡΡΡΠΈΠ» Π΅Π³ΠΎ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ β οΈ!
Π― Π΄ΠΎΠ±Π°Π²ΠΈΠ» Π΄Π²Π΅ Π½ΠΎΠ²ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²Π΅ΡΡΠΈΡ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ° Ρ ΡΠΌΠΎΡΠΈΡΠΌΠΈ WIP:
ΠΠΎΡΠ»Π΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄Π»Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΡΡΠ΅Π΄Ρ ΡΡΠ°ΡΠΈΡΡΠΈΠΊΠ° ΠΏΠΎΡ ΠΎΠΆΠ° Π½Π° https://github.com/mui-org/material-ui/issues/22342#issuecomment -697540546, ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ Π² 1,6 ΡΠ°Π·Π° ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅ (Π½ΠΎ CSS ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΉ). ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΈΠ³ΡΠ°ΡΡ Ρ Π²Π΅ΡΡΠΈΠ΅ΠΉ ΡΠΌΠΎΡΠΈΠΉ WIP Ρ ΠΏΠΎΠΌΠΎΡΡΡ:
Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΌΡ Π·Π½Π°Π΅ΠΌ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ΅ΠΊΡΡΡΡ Π²Π΅ΡΡΠΈΡ JSS x1.1 Π±ΡΡΡΡΠ΅Π΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ makeStyles Π²ΠΌΠ΅ΡΡΠΎ withStyles: # 15023.
@oliviertassinari Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ prod Π²ΡΠ΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΡΡΡΡΠ΅Π΅, Π½ΠΎ Ρ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΡΠ°Π·Π»ΠΈΡΠΈΡ ΠΎΡΡΠ°ΡΡΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π»ΠΊΠ½ΡΡΡ ΠΏΠΎ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ> Vercel Π² ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ΅ ΠΊΠΎΠ΄Π°, ΡΡΠΎΠ±Ρ Π±ΡΡΡΡΠΎ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡ Ρ ΡΠ»Π°Π³Π°ΠΌΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΡΠ±ΠΎΡΠΊΠΈ.
ΠΠ»ΡΠ΄Ρ Π½Π° ΡΠΎ, ΠΊΠ°ΠΊ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ makeStyles
, Ρ Π²ΠΈΠΆΡ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ Π±ΡΡΡΡΠ΅Π΅, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ :
attach
.stylesCreator.create
, ΠΊΠΎΡΠΎΡΡΠΉ, Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, Π²ΡΠ·ΡΠ²Π°Π΅Ρ fn
ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ Π² makeStyles(fn)
.stylesCreator.create
ΠΏΡΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠ΅ΡΡΠΈΠΊ ΡΡΡΠ»ΠΎΠΊ> 0.ΠΠ»Ρ ΠΏΠΎΠ²ΡΠΎΡΠ½ΡΡ ΡΠ΅Π½Π΄Π΅ΡΠΎΠ²:
attach
.stylesCreator.create
ΠΏΡΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠ΅ΡΡΠΈΠΊ ΡΡΡΠ»ΠΎΠΊ> 0, ΠΏΠΎΡΡΠΎΠΌΡ Π½ΠΈΠΊΠ°ΠΊΠ°Ρ ΡΠ°Π±ΠΎΡΠ° Π½Π΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ.ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π΅ΡΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ, ΡΠΎ Π»ΠΈΡΡΡ Π±ΡΠ΄ΡΡ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡΡΡ Π·Π΄Π΅ΡΡ ΠΏΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΌΠΎΠ½ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠΌ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π΅.
ΠΠ°ΠΏΡΠΎΡΠΈΠ², styled-components
ΠΈ emotion
ΠΏΠΎΡ
ΠΎΠΆΠ΅, Π·Π°ΠΏΡΡΠΊΠ°ΡΡ Π½Π°ΡΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°, ΡΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΡΠΈΠΊΠ»ΠΎΠ² ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΠ° ΠΈ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΌΡ Π΄Π°Π²Π»Π΅Π½ΠΈΡ ΠΏΠ°ΠΌΡΡΠΈ. Π― Π΄ΡΠΌΠ°Π», ΡΡΠΎ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΊΠ°ΠΊΠΈΠΌ-ΡΠΎ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ΅Ρ-ΠΏΠ°ΠΌΡΡΡ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΡΠΌΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ², Π½ΠΎ ΡΡΠΎ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π»ΠΎ, ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΡΠΈΠ»Π΅ΠΉ ΡΠΈΡΡΡΠ΅, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ ΡΠ°ΠΊ, ΡΡΡΠΈΡΠ΅:
const someContext = useContext(FooContext);
return <div css={ { paddingTop: someContext.padding(1) } }>;
ΠΡΠ»ΠΈ ΠΌΠΎΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π²Π΅ΡΠ½Ρ, Π±ΡΠ΄Π΅Ρ ΠΎΡΠ΅Π½Ρ ΡΠ»ΠΎΠΆΠ½ΠΎ Π΄ΠΎΡΡΠΈΡΡ ΡΡΠΎΠ²Π½Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ makeStyles
Π΄Π»Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΡΠΈΠ»Π΅ΠΉ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠΏΠΎΡΠΎΠ± Π΅Π³ΠΎ ΡΠ°Π±ΠΎΡΡ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ API ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ styled
ΠΈΠ»ΠΈ css
API Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ.
Π― Π²ΠΈΠΆΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΠΈΠ·ΡΡΠΈΡΡ:
ΠΡΠ»ΠΈ ΠΊΠ°ΠΊΠΈΠΌ-ΡΠΎ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ emotion
ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ» Ρ
ΡΠΊ useCss
ΠΊΠ°ΠΊ ΡΡΠΎ Π±ΡΠ»ΠΎ Π·Π°ΠΏΡΠΎΡΠ΅Π½ΠΎ Π² https://github.com/emotion-js/emotion/issues/1321 ΠΈ https://github.com/emotion- js / Emotion / issues / 1853 , ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ makeStyles
API ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° Β«ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ CSSΒ». ΠΠ΄Π½Π°ΠΊΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ CSS ΠΏΠΎΠ²ΡΡΠ΄Ρ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ, ΡΡΠΎ Π½Π΅ ΡΠ°ΠΊ Β«ΡΠΈΡΡΠΎΒ», Π½ΠΎ ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΌΡ ΡΠΆΠ΅ Π΄Π΅Π»Π°Π΅ΠΌ Π² v4.
ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Ρ ClassNames
API, Ρ Π΄ΡΠΌΠ°Ρ, ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠΎΡΡ withStyles
, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΡ
ΡΠ°Π½ΠΈΠ» Π±Ρ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ CSS ΠΈ Ρ
ΠΎΡΠΎΡΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ CSS, ΠΊΠΎΡΠΎΡΡΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΠΎΡΠΈΡ. ΠΡΠ»ΠΈ Π±Ρ const css = useCss()
ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°Π», ΡΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΏΡΠΎΡΡΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΡΡ API useStyles
.
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ withStyles
+ makeStyles
API, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΌΠΎΡΠΈΠΈ ΠΏΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡΠΎΠΌ:
withStyles
ΠΈ makeStyles
Π²Π½Π΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Material, ΠΌΠΈΠ³ΡΠΈΡΠΎΠ²Π°ΡΡ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ Π½ΡΠΆΠ½ΠΎ. ΠΠ½ΠΈ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠ°Ρ ΡΠ»ΡΡΡΠ΅Π½Π½ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ CSS.classes
+ CSS API Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π»ΠΎΠ³ΠΈΠΊΠΈ. Π‘ styled
Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ className
s Π²ΡΡΡΠ½ΡΡ ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»ΠΈΡΡ.useCss
- Π½Π°ΡΠ° ΡΡΠ½ΠΊΡΠΈΡ-Π°Π΄Π°ΠΏΡΠ΅Ρ Π΄Π»Ρ CSS Π² ΡΠ΅ΡΠ΅Π½ΠΈΡΡ
JS, Π° Π½Π΅ styled
.styled
.ΠΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ·ΡΡΠΈΠ»ΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ https://twitter.com/olivtassinari/status/1309247827839680512. Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π²ΠΏΠ΅ΡΠ΅Π΄ ΠΊΠ°ΠΊ Π΅ΡΡΡ. ΠΠ»Ρ ΠΊΠΎΠΌΠ°Π½Π΄, ΠΊΠΎΡΠΎΡΡΠ΅ Π³Π»ΡΠ±ΠΎΠΊΠΎ Π·Π°Π±ΠΎΡΡΡΡΡ ΠΎ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π²ΡΠ±ΡΠ°ΡΡ Π½Π΅ΡΡΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΎΠ½ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ Π»ΡΡΡΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ. ΠΠ»Ρ Π΄ΡΡΠ³ΠΈΡ , ΠΊΠ°ΠΊ ΠΈ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΠ°ΡΡΠΈ ΠΈΠ½Π΄ΡΡΡΡΠΈΠΈ, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Ρ ΠΎΡΠΎΡΠΈ ΡΠΌΠΎΡΠΈΠΈ ΠΈ ΡΡΠΈΠ»ΠΈ.
https://codesandbox.io/s/slider-comparison-forked-jziv6?file=/src/App.jsβ¦
ΠΠ·Π²ΠΈΠ½ΠΈΡΠ΅, ΡΡΠΎ ΠΏΠΎΠ±Π΅ΡΠΏΠΎΠΊΠΎΠΈΠ» Π²Π°Ρ Π·Π΄Π΅ΡΡ ΡΠ°ΠΊ ΠΏΠΎΠ·Π΄Π½ΠΎ Π² ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΠΈ, Π½ΠΎ Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΄ΠΈΠ²Π»Π΅Π½, ΡΡΠΎ Π²Ρ Π½Π΅ ΡΠΌΠΎΡΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ Π½Π° styled-jsx
ΠΡ ΡΠΏΠΈΡΠΎΠΊ Π² ΡΠΎΡΠ½ΠΎΡΡΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π» Π²Π°ΡΠΈΠΌ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΠΌ:
Π― Π±Ρ ΠΎΠ±ΡΠ°ΡΠΈΠ» Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΡΠΎ ΠΏΠΎΡΡΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ API ΡΠ΅Π½Π΅Π²ΠΎΠ³ΠΎ CSS . Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠ΄Π°Π»ΠΈΠ² Π°ΡΡΠΈΠ±ΡΡ jsx
Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° Π²Π΅Π±-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅, ΠΊΡΡΠ°ΡΠΈ, ΡΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² ΠΎΠ±ΡΡΠ½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
.
ΠΠ°, Ρ Π·Π½Π°Ρ, ΡΡΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ ΡΠ°ΠΌΡΠΌ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ.
ΠΠΎ Ρ ΠΏΡΠΎΡΡΠΎ Ρ
ΠΎΡΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»Π΅Ρ Π½Π°Π·Π°Π΄ Flash Π±ΡΠ» ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ΅Π½.
ΠΠΎ Π² ΠΊΠΎΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠΎΠ² ΠΎΠ½ ΠΈΡΡΡΠΊ, Π½Π΅ Π±ΡΠ΄ΡΡΠΈ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠΌ Ρ Π²Π΅Π±-ΡΡΠ°Π½Π΄Π°ΡΡΠ°ΠΌΠΈ, ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ SVG.
ΠΠ»Ρ Π·Π°ΠΏΠΈΡΠΈ ΡΡΠ°Π½Π΄Π°ΡΡ SVG ΠΏΡΠΈΡΡΡΡΡΠ²ΠΎΠ²Π°Π» Π΅ΡΠ΅ Π΄ΠΎΠ»Π³ΠΎ, ΠΊΠΎΠ³Π΄Π° Π² ΠΎΡΡΠ°ΡΠ»ΠΈ ΠΏΡΠ°Π²ΠΈΠ» Flash.
Π― ΠΏΡΠΎΡΡΠΎ ΡΠΌΠΎΡΡΡ Π½Π° ΠΈΡΡΠΎΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠΎΠ±ΡΡΠΈΡ ΠΊΠ°ΠΊ Π½Π° Ρ
ΠΎΡΠΎΡΠΈΠ΅ ΡΡΠΎΠΊΠΈ ΠΈ ΠΏΡΡΠ°ΡΡΡ Π²ΡΡΠ²ΠΈΡΡ Π·Π°ΠΊΠΎΠ½ΠΎΠΌΠ΅ΡΠ½ΠΎΡΡΡ, ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»Π΅ΠΌ Π½Π°Π΄Π΅ΠΆΠ½ΠΎΡΡΠΈ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΈ Π½Π°Π΄Π΅ΠΆΠ½ΠΎΡΡΠΈ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ.
@mifrej Π£ ΠΌΠ΅Π½Ρ Π»ΠΈΡΠ½ΠΎ Π±ΡΠ» ΠΏΠ»ΠΎΡ ΠΎΠΉ ΠΎΠΏΡΡ Ρ ΡΡΠΈΠΌ: https://github.com/vercel/styled-jsx/issues/142.
ΠΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ·ΡΡΠΈΠ»ΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ https://twitter.com/olivtassinari/status/1309247827839680512. Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π²ΠΏΠ΅ΡΠ΅Π΄ ΠΊΠ°ΠΊ Π΅ΡΡΡ. ΠΠ»Ρ ΠΊΠΎΠΌΠ°Π½Π΄, ΠΊΠΎΡΠΎΡΡΠ΅ Π³Π»ΡΠ±ΠΎΠΊΠΎ Π·Π°Π±ΠΎΡΡΡΡΡ ΠΎ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π²ΡΠ±ΡΠ°ΡΡ Π½Π΅ΡΡΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΎΠ½ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ Π»ΡΡΡΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ. ΠΠ»Ρ Π΄ΡΡΠ³ΠΈΡ , ΠΊΠ°ΠΊ ΠΈ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΠ°ΡΡΠΈ ΠΈΠ½Π΄ΡΡΡΡΠΈΠΈ, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Ρ ΠΎΡΠΎΡΠΈ ΡΠΌΠΎΡΠΈΠΈ ΠΈ ΡΡΠΈΠ»ΠΈ.
- ΡΠΎΠ΄Π½ΠΎΠΉ: 7,71 ΠΌΡ
- v5 Π±Π΅Π· ΡΡΠΈΠ»Ρ: 20,89 ΠΌΡ
- v4: 29,93 ΠΌΡ
- v5: 37,37 ΠΌΡ
- antd: 53,48 ΠΌΡ
- ΡΠ°ΠΊΡΠ°: 64,67 ΠΌΡ
https://codesandbox.io/s/slider-comparison-forked-jziv6?file=/src/App.jsβ¦
ΠΡ ΠΏΡΠΎΠ±ΠΎΠ²Π°Π»ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ babel Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΡΠΌΠΎΡΠΈΠΉ / ΡΡΠΈΠ»Π΅ΠΉ? ΠΡΠΎ ΠΏΠΎΠ²Π»ΠΈΡΠ»ΠΎ Π½Π° ΡΠ°ΠΉΠΌΠΈΠ½Π³ΠΈ?
Π§ΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΠ·Π½Π°ΡΠ°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ JSS Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° classes
Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ³ΠΎ Π² ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°Ρ
MUI? ΠΠ°ΠΊ ΠΌΠΈΠ³ΡΠ°ΡΠΈΡ v5 Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π΄Π»Ρ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΡ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΈΡΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΡΡ ΠΎΠΏΡΠΈΡ?
ΠΡ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌ, ΡΡΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π»ΡΠ΄ΠΈ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ: https://next.material-ui.com/components/slider-styled/#unstyled -slider ΠΊΠ»Π°ΡΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π·Π°ΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°ΠΌΠΈ ΠΊΠ»Π°ΡΡΠΎΠ², Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌΠΈ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»ΠΎΡΠ° Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ: https://next.material-ui.com/components/slider-styled/#customized -sliders
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΡ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π½Π° ΠΈΡ ΠΎΡΠ½ΠΎΠ²Π΅.
ΠΡ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌ, ΡΡΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π»ΡΠ΄ΠΈ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ: https://next.material-ui.com/components/slider-styled/#unstyled -slider ΠΊΠ»Π°ΡΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π·Π°ΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°ΠΌΠΈ ΠΊΠ»Π°ΡΡΠΎΠ², Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌΠΈ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»ΠΎΡΠ° Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ: https://next.material-ui.com/components/slider-styled/#customized -sliders
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΡ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π½Π° ΠΈΡ ΠΎΡΠ½ΠΎΠ²Π΅.
ΠΠ½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ ΡΡΠΎΡ API! ΠΡΠ΅Π½Ρ Π΄ΠΎΠ»Π³ΠΎΠΆΠ΄Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅, ΠΈ, ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΠΎΠ½ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Ρ ΠΎΡΠΎΡΠΎ ΡΠΎΡΠ΅ΡΠ°Π΅ΡΡΡ Ρ Π΄Π²ΠΈΠΆΠΊΠ°ΠΌΠΈ ΡΡΠΈΠ»Ρ.
ΠΠΎ v5
, Π΅ΡΠ»ΠΈ Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΏΠΎΠΌΠ½Ρ, ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΎΡ JSS ΠΈΡΠΊΠ°ΠΆΠ°Π» ΡΡΠΈ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ², ΠΈ Π²Ρ Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ Π½Π°Π΄Π΅ΠΆΠ½ΠΎ Π½Π°ΡΠ΅Π»ΠΈΡΡ ΠΈΡ
? ΠΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ Π²ΡΡΡΠ°Π²Π»Π΅Π½Ρ Π΄Π»Ρ Π½Π°ΡΠ΅Π»ΠΈΠ²Π°Π½ΠΈΡ? π Π’Π°ΠΊΠΆΠ΅ Π±ΡΠ»Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠΎΠΌ CSS. Π ΡΡΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄Π°? Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΡΠ°Π±ΠΎΡΡ Π½Π°Π΄ ΡΡΠΈΠΌ ΡΠ΅ΡΠ°ΠΊΡΠΎΡΠΈΠ½Π³ΠΎΠΌ!
@ConAntonakos ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΈ ΠΊΠ»Π°ΡΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π½Π°ΡΠ΅Π»Π΅Π½Ρ ΠΊΠ°ΠΊ Π½Π° Π½Π΅ΡΡΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅, ΡΠ°ΠΊ ΠΈ Π½Π° ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². ΠΠΎΡΡΠ΄ΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ ΡΡΠΈΠ»ΠΈ, Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ Π½ΠΎΠ²ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π²ΡΠΈΠ³ΡΠ°ΡΡ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π΅ΡΠ»ΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ° ΡΠ°ΠΊΠ°Ρ ΠΆΠ΅ :)
ΠΠΎ v5, Π΅ΡΠ»ΠΈ Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΏΠΎΠΌΠ½Ρ, ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΎΡ JSS ΠΈΡΠΊΠ°ΠΆΠ°Π» ΡΡΠΈ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ², ΠΈ Π²Ρ Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ Π½Π°Π΄Π΅ΠΆΠ½ΠΎ Π½Π°ΡΠ΅Π»ΠΈΡΡ ΠΈΡ ?
ΠΡ ΡΠΆΠ΅ ΠΌΠΎΠ³Π»ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ°ΡΠ³Π΅ΡΠΈΠ½Π³ Π½Π° Π½ΠΈΡ Π² Π²Π΅ΡΡΠΈΠΈ 4.
ΠΊΠ»Π°ΡΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π·Π°ΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°ΠΌΠΈ ΠΊΠ»Π°ΡΡΠΎΠ², Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌΠΈ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»ΠΎΡΠ° Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅.
ΠΠ°ΠΌΠ΅Π½ΡΡΡΡΡ Π»ΠΈ ΠΎΠ½ΠΈ Β«Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌΒ» ΠΈΠ»ΠΈ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ? Π― ΠΏΠΎΠ΄ΡΠΌΠ°Π», ΡΡΠΎ ΠΌΡ ΡΠ΅ΡΠΈΠ»ΠΈ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠ°ΡΡΡ ΡΡΠ°ΡΠΎΠ³ΠΎ API, ΡΡΠΎΠ±Ρ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
Π― ΠΏΠΎΠ΄ΡΠΌΠ°Π», ΡΡΠΎ ΠΌΡ ΡΠ΅ΡΠΈΠ»ΠΈ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠ°ΡΡΡ ΡΡΠ°ΡΠΎΠ³ΠΎ API, ΡΡΠΎΠ±Ρ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
ΠΡ ΡΠ΅ΡΠΈΠ»ΠΈ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ ΡΠΎΡ ΠΆΠ΅ API Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ theme.components.overrides
ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
Π² ΡΠ΅ΠΌΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠ°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
ΠΠ»Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠΎΠ² Ρ Π½Π°Ρ ΡΠ΅ΠΏΠ΅ΡΡ Π΅ΡΡΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ styled
Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°ΠΌΠΈ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠΏΠΎΡΠ° classes
Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ. Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π΄Π΅Π»Π°ΡΡ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΎ.
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π΄Π΅Π»Π°ΡΡ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΎ.
ΠΠ²ΡΡΠΈΡ ΡΠ°ΠΊ, Π±ΡΠ΄ΡΠΎ ΡΡΠΎ ΡΠ°ΠΊΠ°Ρ Π½Π΅Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π΅ΡΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π°, Π½ΠΎ ΡΡΠΎΠΈΠΌΠΎΡΡΡ ΠΌΠΈΠ³ΡΠ°ΡΠΈΠΈ Π΄Π»Ρ Π½Π΅Π΅ ΠΎΠ³ΡΠΎΠΌΠ½Π°. ΠΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΏΠ»Π°Π½ ΠΌΠΈΠ³ΡΠ°ΡΠΈΠΈ?
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ΅ΠΌΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΡΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠ° Π²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ThemeProvider
ΠΈΠΌ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΡΡΠΊΡΡΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΈΠΌΠΈ Π΄Π²ΡΠΌΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌΠΈ (ΡΡΠΎ Π½Π΅ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ , Π½ΠΎ Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Ρ
ΠΎΡΡΡ ΠΈΠ½ΠΊΡΠ΅ΠΌΠ΅Π½ΡΠ½ΠΎΠ³ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ, ΡΡΠΎ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠΉΡΠΈ)
Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΠΌΡ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΊΠ»Π°ΡΡΠΎΠ², Π½ΠΎ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°ΡΡ, ΡΡΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² + ΡΡΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΡΠΈΠ³ΡΠ°ΡΡ. ΠΠΎΠ»ΠΆΠ½Ρ Π»ΠΈ ΠΌΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅ Π² ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²?
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ ΠΏΡΠΎΠΏΡΡΡΠΈΠ» ΡΡΠΎ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΡΠΎΠΉ Π±Π΅ΡΠ΅Π΄Ρ - Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π²ΠΎΠΏΡΠΎΡ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠΉ Ρ ΠΌΠΎΠΈΠΌ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ classes
. ΠΠ°ΠΊΠΈΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π³Π°ΡΠ°Π½ΡΠΈΠΈ Β«ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΡΡΠΈΒ»?
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π» ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ°:
const StyledSlider = styled(SliderUnstyled)`
& .MuiSlider-raill {
display: block;
position: absolute;
width: 100%;
height: 2px;
border-radius: 1px;
background-color: currentColor;
opacity: 0.38;
}
)
ΠΡ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅, ΡΡΠΎ Ρ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Π» MuiSlider-rail
. Π Π°Π½ΡΡΠ΅ Ρ classes
Π±ΡΠ»ΠΎ ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ classes.rail
, ΠΈ Π΅ΡΠ»ΠΈ Π±Ρ Ρ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Π» ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, Ρ Π±Ρ ΠΏΠΎΠ»ΡΡΠΈΠ» ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ classes.raill
Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ. Π― ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ Ρ ΡΠ΅ΠΌΡ ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅?
Π― ΠΌΠΎΠ³Ρ Π²ΡΠΏΠΎΠΌΠ½ΠΈΡΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° classes
API:
.css-e7ylz8 .MuiTreeItem-group
. Π£ Π²Π°Ρ Π½Π΅Ρ Π³Π°ΡΠ°Π½ΡΠΈΠΉ, ΡΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΡΡΠΈΠ»Ρ ΠΊ Π΄ΠΎΡΠ΅ΡΠ½Π΅ΠΌΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ (Π½Π΅ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΡΠΉ ΡΡΡΠ΅ΠΊΡ, ΡΡΡΠΏΡΠΈΠ·!). ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄Π»Ρ Π½Π°ΡΠΈΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π²ΡΠ΅ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΎΡΡΠΎΡΠΎΠΆΠ½Ρ.$styleRule
ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π°Π΅Ρ, Π΅ΡΠ»ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΡΡΠΈΠ»Ρ Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ.componentsProps
. ΠΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅ΠΌ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ².ΠΡΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΠΌΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΡ Π±Ρ:
Π°. ΠΠΎΠ·Π²ΠΎΠ»ΡΡΠ΅ ΡΠ΅ΡΠΈΡΡ 1. ΠΈ 3. Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² .
Π±. ΠΡΠΊΡΠΎΠΉΡΠ΅ API classes
Π΄Π»Ρ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ.
c. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ. ΠΈ Π±. ΡΠ°Π±ΠΎΡΠ°Ρ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ³Π»Π°Π΄ΠΈΡΡ ΡΠΎ, ΠΊΠ°ΠΊ ΡΡΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Π½Π°ΠΏΠΈΡΠ°Π½Ρ Π²Π½ΡΡΡΠΈ. ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π² ΡΡΠΈΠ»Π΅ x Π²ΠΌΠ΅ΡΡΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ. ΠΠΎ β οΈ Ρ ΠΏΠΎΠ΄ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΏΠ΅ΡΡΠΎΠΌΠ°Π½ΡΠ°.
ΠΠ°ΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΡΠΆΠ½ΠΎ ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ?
Π― ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅Π» ΠΈΡΡΠΎΡΠΈΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ classes
jQuery UI. Π― ΡΠΌΠΎΠ³ Π½Π°ΠΉΡΠΈ Π΄Π²Π΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ: https://bugs.jqueryui.com/ticket/7053 , https://bugs.jqueryui.com/ticket/8928 ΠΈ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠΌΠΌΠΈΡ: https://github.com/jquery/jquery- ui / commit / c192d4086d9bbaf09d5f870857af30c60a427e22.
ΠΡ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌ, ΡΡΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π»ΡΠ΄ΠΈ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ: https://next.material-ui.com/components/slider-styled/#unstyled -slider ΠΊΠ»Π°ΡΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π·Π°ΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°ΠΌΠΈ ΠΊΠ»Π°ΡΡΠΎΠ², Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌΠΈ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»ΠΎΡΠ° Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ: https://next.material-ui.com/components/slider-styled/#customized -sliders
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΡ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π½Π° ΠΈΡ ΠΎΡΠ½ΠΎΠ²Π΅.
ΠΠ°Ρ, ΡΡΠΎ Π»ΡΡΡΠ°Ρ Π²Π΅ΡΡ Π½Π° ΡΠ²Π΅ΡΠ΅.
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π±Π΅Π· ΡΡΠΈΠ»Π΅ΠΉ ΠΈΠ»ΠΈ Π±Π΅Π· Π³ΠΎΠ»ΠΎΠ²Ρ Π±ΡΠ΄ΡΡ Π»ΡΡΡΠΈΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ (Ρ Π΄ΡΠΌΠ°Ρ, ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΊΡΠΈΡΠΈΠΊΠΎΠ² mui).
ΠΡΠΎ Π½Π΅ ΠΌΠ΅Π»ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ imo, Π½ΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΏΠ»ΡΡ Π΄Π»Ρ MUI.
PS: Π― ΠΏΠΎΠΌΠ½Ρ, ΠΊΠ°ΠΊ Π² ΠΏΡΠΎΡΠ»ΠΎΠΌ Π±ΡΠ»ΠΎ ΡΡΡΠ΄Π½ΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ
PS2: ΠΡ ΡΠΌΠΎΡΡΠ΅Π»ΠΈ https://github.com/modulz/stitches ?
ΠΡ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅, ΡΡΠΎ Ρ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎ ΠΎΡΠΈΠ±ΡΡ Π² Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠΈ MuiSlider-rail. Π Π°Π½ΡΡΠ΅ Ρ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ Π±ΡΠ»ΠΎ ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ classes.rail, ΠΈ Π΅ΡΠ»ΠΈ Π±Ρ Ρ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Π» ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, Ρ ΠΏΠΎΠ»ΡΡΠ°Π» Π±Ρ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ classes.raill Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ. Π― ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ Ρ ΡΠ΅ΠΌΡ ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅?
@ianschmitz Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΎΠΏΡΠΈΠΈ @oliviertassinari, ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², Ρ Π½Π°Ρ Π΅ΡΡΡ Π΅ΡΠ΅ ΠΎΠ΄Π½Π° ΠΎΠΏΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΠΊΠΎΠ½ΡΡΠ°Π½Ρ Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌ. ΠΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅:
import { sliderClasses } from '@material-ui/core/Slider';
const StyledSlider = styled(SliderUnstyled)`
& .${sliderClasses.rail} {
display: block;
position: absolute;
width: 100%;
height: 2px;
border-radius: 1px;
background-color: currentColor;
opacity: 0.38;
}
)
ΠΡΠΎ Π½Π΅ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅, ΡΡΠΎ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ classes.rail
Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, Π½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠΎΡΡ ΠΎΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ².
@mnajdova ΠΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ eslint.
Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΠΎΠΏΠΎΡΡ classes
- Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π½Π°Π΄Π΅ΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΠ°ΡΡΠΈ (ΡΠ»ΠΎΡΠ°) ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ Slider
Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π΄Π»Ρ ΡΠ΅Π»ΡΡΠ°, ΠΏΡΡΠΈ, ΠΌΠ΅ΡΠΊΠΈ, ΠΌΠ΅ΡΠΊΠΈ ΠΌΠ΅ΡΠΊΠΈ, Π±Π΅Π³ΡΠ½ΠΊΠ° ΠΈ ΠΌΠ΅ΡΠΊΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π½Π°ΠΌ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΡΠΈΠ»ΠΈ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π΄Π»Ρ ΡΡΠΈΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΠΈ. ΠΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π² ΡΡΠΎΠΌ PR - https://github.com/mui-org/material-ui/pull/22893
Π‘ ΡΡΠΈΠΌΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌΠΈ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ codeandbox, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Slider ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ v4, Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌ ΡΡΠΈΠ»Π΅ΠΌ, Π±Π΅Π· ΡΡΠΈΠ»Π΅ΠΉ, Π° ΡΠ°ΠΊΠΆΠ΅ Ρ Π΄Π²ΡΠΌΡ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΊΠΎΠ½ΠΊΡΡΠΈΡΡΡΡΠΈΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°ΠΌΠΈ - https://codesandbox.io/s/ ΡΡΠ°Π²Π½Π΅Π½ΠΈΠ΅ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ° Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ 2tytc? file = / package.json
ΠΡΠ»ΠΈ ΠΌΡ ΡΡΠ°Π²Π½ΠΈΠΌ ΡΡΠΈ ΠΏΠ΅ΡΡΠΎΠΌΠ°Π½ΡΡ Ρ ΠΏΠ΅ΡΡΠΎΠΌΠ°Π½ΡΠΎΠΌ Π½Π°Π»ΠΈΡΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΊΠ»Π°ΡΡΠΎΠ² Π΄Π»Ρ Π΅Π³ΠΎ ΡΠ°ΡΡΠ΅ΠΉ - https://codesandbox.io/s/slider-comparison-forked-jziv6?file=/src/App.js ΠΌΡ Π·Π°ΠΌΠ΅ΡΠΈΠΌ, ΡΡΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π½Π° ΡΠ»ΠΎΡ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΠ½ΠΈΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π½Π° 20% π’
ΠΠ°ΡΠΈΠ°Π½ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π°:
ΠΡΠ»ΠΈ ΡΠ΅ΡΡΠ½ΠΎ, Ρ ΠΏΠΎΠΊΠ° Π½Π΅ Π·Π½Π°Ρ, Π»ΡΡΡΠ΅ Π»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ ΠΈΠ»ΠΈ Π½Π΅Ρ.
ΠΡΠΎ ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ ΡΠ΅Π°Π»ΡΠ½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ classes
ΠΈΠ»ΠΈ ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ Π΄Π»Ρ ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½ΠΈΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ?
ΠΠΎΠΏΡΡΡΠΈΠΌ Π»ΠΈ ΠΌΡ, ΡΡΠΎ ΡΠ½ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π½Π° 20% ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½ΠΈΡ ΠΏΡΡΠΈ ΠΌΠΈΠ³ΡΠ°ΡΠΈΠΈ?
ΠΡΡΡ Π»ΠΈ ΠΊΠ°ΠΊΠ°Ρ-ΡΠΎ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π°, ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ Π½Π΅ Π²ΠΈΠ΄ΠΈΠΌ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠΌΠΎΠ³Π»Π° Π±Ρ Π½Π°ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈ ΡΠΎ, ΠΈ Π΄ΡΡΠ³ΠΎΠ΅, Π½Π΅ ΠΏΠ»Π°ΡΡ Π·Π° ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ?
@ianschmitz @ eps1lon @oliviertassinari ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ :) Π΅ΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π½ΠΈΠ±ΡΠ΄Ρ ΠΌΡΡΠ»ΠΈ ΠΏΠΎ ΡΡΠΎΠΌΡ
ΠΠΎΠΊΠ° ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΠΌΡ ΠΈ ΡΡΠΈΠ»ΠΈ Ρ TypeScript, Ρ Π±Ρ Π½Π΅ ΠΏΡΠΎΡΡ ΠΏΠΎΡΡΠ°ΡΠΈΡΡ Π²ΡΠ΅ΠΌΡ Π½Π° ΠΌΠΈΠ³ΡΠ°ΡΠΈΡ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΏΠΎΡΠ΅ΡΠ΅ΠΉ 20% ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ.
ΠΠ½Π΅ Π²ΠΎΠΎΠ±ΡΠ΅ Π»ΡΠ±ΠΎΠΏΡΡΠ½ΠΎ, ΠΈ ΠΏΡΠΎΡΡΠΈΡΠ΅ ΠΌΠ΅Π½Ρ, Π΅ΡΠ»ΠΈ Ρ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, Π½ΠΎ classes
Π±ΡΠ» API Π΄Π»Ρ JSS? ΠΡΠ»ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ API ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Ρ JSS Π½Π° ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΈΠΌΠ΅Π΅Ρ Π»ΠΈ ΡΠΌΡΡΠ» ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ classes
?
ΠΡΠΎ ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ ΡΠ΅Π°Π»ΡΠ½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ
classes
ΠΈΠ»ΠΈ ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ Π΄Π»Ρ ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½ΠΈΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ?
ΠΠΎΠΏΡΡΡΠΈΠΌ Π»ΠΈ ΠΌΡ, ΡΡΠΎ ΡΠ½ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π½Π° 20% ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½ΠΈΡ ΠΏΡΡΠΈ ΠΌΠΈΠ³ΡΠ°ΡΠΈΠΈ?
ΠΡΡΡ Π»ΠΈ ΠΊΠ°ΠΊΠ°Ρ-ΡΠΎ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π°, ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ Π½Π΅ Π²ΠΈΠ΄ΠΈΠΌ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠΌΠΎΠ³Π»Π° Π±Ρ Π½Π°ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈ ΡΠΎ, ΠΈ Π΄ΡΡΠ³ΠΎΠ΅, Π½Π΅ ΠΏΠ»Π°ΡΡ Π·Π° ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ?
ΠΡΠΈΠ½ΠΎΡΠΈΠΌ ΠΈΠ·Π²ΠΈΠ½Π΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ Ρ ΡΡΠΎ-ΡΠΎ ΠΏΡΠΎΠΏΡΡΡΠΈΠ» Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΡΠΌ API, Π½ΠΎ ΠΠΠ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²ΠΈΠΆΡ Π² Π½Π°ΡΠ΅ΠΉ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ, - ΡΡΠΎ Π°Π±ΡΡΡΠ°ΠΊΡΠΈΡ Π±Π°Π·ΠΎΠ²ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ ΡΡΠΈΠ»Π΅ΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠΉ MUI. ΠΠ°, Ρ ΠΏΠΎΠ»Π°Π³Π°Ρ, ΡΡΠΎ classes
- ΡΡΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π° Β«API Π΄Π»Ρ JSSΒ», ΠΊΠ°ΠΊ ΡΠΏΠΎΠΌΠΈΠ½Π°Π» @ConAntonakos , Π½ΠΎ Π΄Π»Ρ ΠΏΠΎΡΡΠ΅Π±ΠΈΡΠ΅Π»Ρ ΡΡΠΎ Π½Π΅ ΠΈΠΌΠ΅Π»ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΠ°ΠΊ ΠΏΠΎΡΡΠ΅Π±ΠΈΡΠ΅Π»Ρ Ρ ΠΌΠΎΠ³ Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΡ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΠΉ CSS (Π΅ΡΡΡ Π»ΠΈ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ Ρ classes
?). Π£ Π½Π°Ρ Π΅ΡΡΡ ΡΡΠ΄ ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠ², Π² ΠΊΠΎΡΠΎΡΡΡ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ:
Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΠ΅ΠΉ ΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΠΉ ΡΡΠΈΡ ΠΊΠΎΠΌΠ°Π½Π΄.
ΠΠΊΡΠΏΠΎΡΡ ΠΈΠΌΠ΅Π½ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ Π²ΠΈΠ΄ CSS-in-JS, Π½ΠΎ ΡΡΠΎ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ ΡΠ΅, ΠΊΡΠΎ ΡΡΠΎΠ³ΠΎ Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ?
RE. 20% ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, Ρ ΡΠΎΠ³Π»Π°ΡΠ΅Π½, ΡΡΠΎ ΡΡΠΎ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π½Π΅ΠΏΡΠΈΠ΅ΠΌΠ»Π΅ΠΌΡΠΉ ΠΊΠΎΠΌΠΏΡΠΎΠΌΠΈΡΡ. Π ΠΊΠΎΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠΎΠ², Π²Ρ, ΡΠ΅Π±ΡΡΠ°, Π΄ΠΎΠ»ΠΆΠ½Ρ Π΄Π΅Π»Π°ΡΡ ΡΠΎ, ΡΡΠΎ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π°. ΠΡΠΎΡΡΠΎ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΡΠ²ΠΎΠΈ ΠΌΡΡΠ»ΠΈ π
ΠΠ΄Π½ΠΎ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Ρ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΏΠΎΠ»ΡΡΠ°Π», Π·Π°ΠΊΠ»ΡΡΠ°Π»ΠΎΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ material-ui Π±ΡΠ» ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ Ρ react-native. Π Π½Π°ΡΠΈ Π΄Π½ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΡ ΡΠ²Π»ΡΡΡΡΡ ΠΊΡΠΎΡΡΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅Π½Π½ΡΠΌΠΈ, ΠΈ Π½Π°Π»ΠΈΡΠΈΠ΅ Π΅Π΄ΠΈΠ½ΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ² Π΄Π»Ρ ΠΊΡΠΎΡΡΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². ΠΡ Π·Π°ΠΊΠΎΠ½ΡΠΈΠ»ΠΈ ΡΠ΅ΠΌ, ΡΡΠΎ ΡΠ²Π΅ΡΠ½ΡΠ»ΠΈ Π½Π°Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ material-ui Π½Π° Π²Π΅Π±-ΡΡΠΎΡΠΎΠ½Π΅ ΠΈ react-native-paper Π½Π° Π½Π°ΡΠΈΠ²Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π΅, ΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠΈΠ·ΠΈΡΠΎΠ²Π°Π»ΠΈ Material-ui API. ΠΠ½Π΅ Π±ΡΠ»ΠΎ Π±Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ ΠΏΠΎΠ½ΡΡΡ, Π±ΡΠ΄Π΅Ρ Π»ΠΈ ΡΡΠΎ Π½ΠΎΠ²ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ (Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ / Π²ΡΠ΅) ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° Π΄Π»Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ΅Π°ΠΊΡΠΈΠΈ? ΠΡΠ±ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΠΎΠΊΠ½Π° Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°Ρ , ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, Π±ΡΠ΄ΡΡ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°ΡΡ, Π½ΠΎ ΡΠ°ΠΌ ΡΡΠΈΠ»Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π½Π°ΡΠΈΠ²Π½ΡΠΉ, Π½Π΅ ΡΠ°ΠΊ Π»ΠΈ?
@mschipperheyn react -native ΠΏΠΎΠΊΠ° Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅Π»ΡΡ. ΠΡΠΎ + 5% ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ (1 ΠΌΠ΅ΡΡΡ ΡΠΎΡΡΠ°) ΠΈ + 50% Π±ΠΎΠ»ΡΡΠ΅ ΡΡΠΈΠ»ΠΈΠΉ (ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅). ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·Π΄Π΅ΡΠΆΠΊΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΠΊΠΈ, ΠΈ Π½Π΅Ρ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎΠ³ΠΎ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ, ΠΊΠ°ΠΊ ΠΈΡ ΠΌΠΎΠ½Π΅ΡΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ (Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΌΠΎΠ΄Π΅Π»ΠΈ Ionic). ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΡΠ»Π°ΡΡΠ΅Ρ, ΠΏΠΎΡ ΠΎΠΆΠ΅ , Π·Π°Ρ Π²Π°ΡΠΈΠ» Π±ΠΎΠ»ΡΡΡΡ ΡΠ°ΡΡΡ Π°ΡΠ΄ΠΈΡΠΎΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ΅Π°Π³ΠΈΡΡΠ΅Ρ Π½Π° Π½Π°ΡΠΈΠ²Π½ΡΠ΅ ΡΠ΅Π»ΠΈ.
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° v5 Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π°Π»ΡΡΠ°-Π²Π΅ΡΡΠΈΠΈ, Π΅ΡΡΡ Π»ΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ? Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΎ Π½Π° JSS? ΠΡ Π²ΠΈΠ΄Π΅Π»ΠΈ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ JSS, ΠΏΠΎΡΡΠΎΠΌΡ Ρ Π½Π΅ΡΠ΅ΡΠΏΠ΅Π½ΠΈΠ΅ΠΌ ΠΆΠ΄Π°Π»ΠΈ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ.
@zzzev Π‘Π°ΠΌ ΠΏΠΎ ΡΠ΅Π±Π΅ ΡΡΠΎ Π½Π΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°. ΠΡΠΎ Π²Π΅ΡΠΊΠ° RFC (Π·Π°ΠΏΡΠΎΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π²).
ΠΠ½Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΎ ΠΊΠ°ΠΊΠΈΡ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π²Ρ Π³ΠΎΠ²ΠΎΡΠΈΡΠ΅ ΠΈ ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ Ρ JSS ΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΡΡΡΠΈΡΡ ΡΡΠΎ. ΠΠΎΡΠΎΠΌΡ ΡΡΠΎ, ΠΊΠ°ΠΊ Ρ Π²ΠΈΠΆΡ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π΄Π΅Π»ΠΎ Π½Π΅ Π² ΡΡΠΈΠ»ΡΡ , Π° Π² ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ, Ρ. Π. Π’ΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ Π΄ΠΎΡΡΠΈΡΡ, Π½Π°ΠΏΠΈΡΠ°Π² ΡΡΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΌΠ΅Π½ΡΡΡΡ Π²ΡΡΠΈΡΠ»ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΌΠΎΡΠ½ΠΎΡΡΡ.
ΠΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, Ρ Π½Π΅ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΎΡ JSS ΠΊ Emotion (ΠΊΠΎΡΠΎΡΡΠΉ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΡΡΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅, _ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π΅ΡΠΎΡΡΠ½ΠΎ_ ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ½ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ) ΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΡΡΡΠΈΡΡ ΡΡΠΎ-Π»ΠΈΠ±ΠΎ.
ΠΠ°ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, ΡΠΌΠΎΡΠΈΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ½ΠΈΠ·ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΈ ΡΠ»ΡΡΡΠ°Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ, Π½ΠΎ, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ, ΡΡΠΎ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΡΠ°ΠΊ? Π ΡΡΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π½ΡΡ ΡΠΈΡΠ΅Π», ΠΈ ΠΈΡ ΡΡΡΠ΄Π½ΠΎ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°ΡΡ Ρ ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΉ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ (ΠΈ, ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΈΡΡΠ°ΡΠΈΠΈ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊΠ°).
ΠΠΎΠ³Π΄Π° Π²Ρ Π³ΠΎΠ²ΠΎΡΠΈΡΠ΅, ΡΡΠΎ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΈΡΠ°ΡΡ ΡΡΠΈΠ»ΠΈ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ, Π²Ρ ΠΈΠΌΠ΅Π΅ΡΠ΅ Π² Π²ΠΈΠ΄Ρ ΠΈΠ·Π±Π΅Π³Π°ΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ? ΠΠ»ΠΈ Π΅ΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠ΅ΡΠ΅Π΄ΠΎΠ²ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ?
@zzzev ΠΠ΅ΡΠ½ΠΎ Π² ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΠ°ΡΡΠΈ, Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ Π²ΠΎ Π²ΡΠΎΡΠΎΠΉ (Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΡΠΈΡΠ°Π΅ΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΎΡ Π½Π΅ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΊ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΠΎΠΌΡ ΠΊΠ°ΠΊ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΡΠΉ ΠΏΡΠΈΡΠΎΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ π).
Emotion ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ Π·Π° ΡΡΠ΅Ρ ΡΠΌΠ΅ΡΠ΅Π½Π½ΠΎ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΎΠΉ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ .
Π― Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ; Π½Π΅Ρ Π»ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ Π² ΡΠ΅ΠΊΡΡΠΈΡ / v4 makeStyles? Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΡ ΠΎΠ±ΡΠ°Π·Π΅Ρ
Π― Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ; Π½Π΅Ρ Π»ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ Π² ΡΠ΅ΠΊΡΡΠΈΡ / v4 makeStyles? Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΡ ΠΎΠ±ΡΠ°Π·Π΅Ρ
ΠΡΡΡ, Π½ΠΎ Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ°Ρ ΠΈΠ·Π²Π΅ΡΡΠ½Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ. ΠΠΎΡ ΠΊΠΎΠΌΠ°Π½Π΄Π° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ΄Π°Π»ΡΡΠ΅ ΠΎΡ Π±Π°Π½ΠΊΠΎΠΌΠ°ΡΠ°
Π― ΠΏΡΠΎΡΡΠΎ Π½Π΅Π½Π°Π²ΠΈΠΆΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ½ΡΠΉ ΡΡΠΈΠ»Ρ
jss Ρ
ΠΎΡΠΎΡ, Π½ΠΎ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Ρ ΠΎΡΠ»Π°Π΄ΠΊΠΎΠΉ, ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ ΠΈ Π²ΡΠ΅ Π΅ΡΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ΅ Π΅ΡΠ΅ Π½Π΅ ΡΠ΅ΡΠ΅Π½Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ &:after
ΡΡΠΎ ΠΌΠΎΠΈ ΠΏΠ°ΠΊΠ΅ΡΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ Π΄Π»Ρ react-native ΠΈ react-native-web
https://www.npmjs.com/package/@material-native-ui/theme -provider
Π₯ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ ΡΡΠΎ-ΡΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ (Π½Π°ΡΠ°ΡΡΠ°Π΅Ρ ΠΏΠΎΠ²Π΅ΡΡ RN ΠΈ RNW)
ΠΡΠ°ΠΊ, ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΠ²ΠΎΠ΄ ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΠΎΠΌ ΡΡΠΈΠ»Π΅Π²ΠΎΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠΈ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Ρ Material UI v5? ΠΠΎΡ
ΠΎΠΆΠ΅, ΡΡΠΎ Π΅ΡΡΡ Π½Π°ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠΎΠΉΡΠΈ ΠΎΡ JSS, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ΅ΠΉΡΠ°Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ @material-ui/styles
. ΠΠ»ΠΈ @material-ui/styles
Π±ΡΠ΄Π΅Ρ ΡΠ΅ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ styled-components
?
ΠΡΠ°ΠΊ, ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΠ²ΠΎΠ΄ ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΠΎΠΌ ΡΡΠΈΠ»Π΅Π²ΠΎΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠΈ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Ρ Material UI v5? ΠΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ Π΅ΡΡΡ Π½Π°ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠΎΠΉΡΠΈ ΠΎΡ JSS, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΡΡΡΠΎΠ΅Π½ @ material-ui / styles. ΠΠ»ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ ΡΠ΅ΡΠ°ΠΊΡΠΎΡΠΈΠ½Π³ @ material-ui / styles, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΠΎΡΠ½ΠΎΠ²ΡΠ²Π°Π»ΡΡ Π½Π° Π΄ΡΡΠ³ΠΈΡ ΡΠ΅ΡΠ΅Π½ΠΈΡΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ styled-components?
@ matthewkwong2 ΠΌΡ Π±Ρ Π½Π΅ ΡΡΠ°Π»ΠΈ @material-ui/styles
ΠΊ Π½ΠΎΠ²ΠΎΠΌΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠΌΡ Π΄Π²ΠΈΠΆΠΊΡ, ΠΎΠ½ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ jss. Π v5 ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΎΠ»ΠΈΡΠΎΠ²Π°Π½ ΠΎΡ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΊΠΎΠ΄ΠΎΠ²ΠΎΠΉ Π±Π°Π·Ρ, ΠΈ ΠΌΡ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΠΌ ΡΠ΄Π°Π»ΠΈΡΡ Π΅Π³ΠΎ Π² v6, ΡΡΠΎΠ±Ρ ΠΎΠ±Π»Π΅Π³ΡΠΈΡΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ Π½Π° Π½ΠΎΠ²ΡΠΉ Π΄Π²ΠΈΠΆΠΎΠΊ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ.
ΠΠ»Ρ v5 Ρ Π½Π°Ρ Π±ΡΠ΄ΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡΠΌΠΈ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ sx
prop ΠΈ styled
, ΠΌΡ Π²ΡΠ΅ Π΅ΡΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅ΠΌ Π½Π°Π΄ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΏΠΎΠ²ΠΎΠ΄Ρ.
Π’Π°ΠΊΠΆΠ΅ Π² v5 ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π±ΡΠ΄ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΈ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ΅ΠΌ.
ΠΠ»Ρ v5 Ρ Π½Π°Ρ Π±ΡΠ΄ΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡΠΌΠΈ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ sx prop ΠΈ styled utility, ΠΌΡ Π²ΡΠ΅ Π΅ΡΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅ΠΌ Π½Π°Π΄ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΏΠΎΠ²ΠΎΠ΄Ρ.
Π’Π°ΠΊΠΆΠ΅ Π² v5 ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π±ΡΠ΄ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΈ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ΅ΠΌ.
ΠΠΎΡΡΠΎΠΌΡ, Π΅ΡΠ»ΠΈ Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ sx
ΠΈΠ»ΠΈ styled
Π²ΠΌΠ΅ΡΡΠΎ makeStyles
.
ΠΠΎ ΠΊΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ ΡΠ΅ΠΌΡ (Ρ.Π΅. createMuiTheme
)? Π― ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ ΡΡΠ° ΡΠ°ΡΡΡ ΡΠΎΠΆΠ΅ ΠΏΠΎΡΡΡΠΎΠ΅Π½Π° Π½Π° JSS, Π²Π΅ΡΠ½ΠΎ? ΠΠ°ΠΊΠΈΠΌ Π±ΡΠ΄Π΅Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΠΌΡ (ΡΠΎ Π΅ΡΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ΅Π»ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΡ
ΡΡΠΈΠ»Π΅ΠΉ) ΡΠ΅ΠΉΡΠ°Ρ?
ΠΡ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΠΌ ΡΡ ΠΆΠ΅ ΡΡΡΡΠΊΡΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΠΌΡ, ΠΌΡ ΠΏΡΠΎΡΡΠΎ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΡ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΡΠΌΠΎΡΠΈΠΉ / ΡΡΠΈΠ»Π΅ΠΉ. ΠΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΡΠ΅ΠΌΠ°, API ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅, ΡΠΎΡ ΠΆΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠ΅ΠΌΡ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π΄Π²ΠΈΠΆΠΊΠ°. ΠΠΌΠ΅Π΅Ρ Π»ΠΈ ΡΡΠΎ ΡΠΌΡΡΠ» @ matthewkwong2 ?
@mschipperheyn react -native ΠΏΠΎΠΊΠ° Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅Π»ΡΡ. ΠΡΠΎ + 5% ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ (1 ΠΌΠ΅ΡΡΡ ΡΠΎΡΡΠ°) ΠΈ + 50% Π±ΠΎΠ»ΡΡΠ΅ ΡΡΠΈΠ»ΠΈΠΉ (ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅). ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½Π°Ρ ΡΡΠΎΠΈΠΌΠΎΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΠΊΠ°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΡΠ»Π°ΡΡΠ΅Ρ, ΠΏΠΎΡ ΠΎΠΆΠ΅ , Π·Π°Ρ Π²Π°ΡΠΈΠ» Π±ΠΎΠ»ΡΡΡΡ ΡΠ°ΡΡΡ Π°ΡΠ΄ΠΈΡΠΎΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ΅Π°Π³ΠΈΡΡΠ΅Ρ Π½Π° Π½Π°ΡΠΈΠ²Π½ΡΠ΅ ΡΠ΅Π»ΠΈ.
Π― Π½Π΅ Ρ ΠΎΡΡ Π²Π²ΠΎΠ΄ΠΈΡΡ Π½Π°Ρ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π΄Π°Π»Π΅ΠΊΠΎ, Π½ΠΎ Ρ Ρ ΠΎΡΠ΅Π» Π±Ρ ΠΎΡΠΊΠ°Π·Π°ΡΡΡΡ ΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΈΠ· ΡΡΠΈΡ Π΄ΠΎΠ²ΠΎΠ΄ΠΎΠ².
ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΌΠΎΡΠΈΠΈ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΡΡΡΠ°Π½ΠΈΠ»ΠΎ 2/3 ΡΡΡΠ΄Π½ΠΎΡΡΠ΅ΠΉ, ΡΠ²ΡΠ·Π°Π½Π½ΡΡ Ρ ΡΠ°Π±ΠΎΡΠΎΠΉ MUI Π² RN.
ΠΡ Ρ Π½Π΅ΡΠ΅ΡΠΏΠ΅Π½ΠΈΠ΅ΠΌ ΠΆΠ΄Π΅ΠΌ Π²Π°ΡΠ΅Π³ΠΎ POC π
ΠΡ Ρ Π½Π΅ΡΠ΅ΡΠΏΠ΅Π½ΠΈΠ΅ΠΌ ΠΆΠ΄Π΅ΠΌ Π²Π°ΡΠ΅Π³ΠΎ POC π
Π― Π±Ρ Ρ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅ΠΌ ΠΏΠΎΠΈΠ³ΡΠ°Π»ΡΡ Ρ Π½ΠΈΠΌ, Π΅ΡΠ»ΠΈ Ρ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ. ΠΠΎ Π»ΡΠ΄ΠΈ ΠΎΠ±ΡΡΠ½ΠΎ Π½Π΅ ΡΡΡΡΠΆΠ΄Π°ΡΡ ΡΠ΅Π±Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ΠΌ POC Π΄Π»Ρ Π²Π΅ΡΠ΅ΠΉ, ΠΊ ΠΊΠΎΡΠΎΡΡΠΌ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡΠΈΠ΅ Π½Π΅ ΠΏΡΠΎΡΠ²Π»ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ°. ΠΠ΅Ρ ΡΠΌΡΡΠ»Π° ΡΡΠΎ-ΡΠΎ ΡΡΡΠΎΠΈΡΡ, ΠΊΠΎΠ³Π΄Π° Π½ΡΠ½Π΅ΡΠ½ΡΡ Π°ΡΠΌΠΎΡΡΠ΅ΡΠ° ΡΠ°ΠΊΠΎΠ²Π°, ΡΡΠΎ ΡΡΠΎ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΠΏΡΠΎΡΡΠΎ Π·Π°Π±ΡΠΎΡΡΡ. ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ Ρ Ρ ΠΎΡΡ ΠΎΡΠΊΠ°Π·Π°ΡΡΡΡ ΠΎΡ ΠΎΡΠΊΠ»ΠΎΠ½Π΅Π½ΠΈΡ ΡΠ΅Π½Π½ΠΎΡΡΠΈ RN ΠΈΠ»ΠΈ ΡΠ΅Π½Π½ΠΎΡΡΠΈ RN ΠΊΠ°ΠΊ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π»Ρ Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ.
ΠΠ²Π° Π²ΠΎΠΏΡΠΎΡΠ°:
classes
prop (ΡΡΠΎ Π΄Π°Π»ΠΎ Π±Ρ ΠΏΠΎΠ»Π½ΡΡ Π³ΠΈΠ±ΠΊΠΎΡΡΡ Π² Π²ΡΠ±ΠΎΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ)?fast-refresh
Π²ΠΊΠ»ΡΡΠ΅Π½ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π² create-react-app v4 . ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π±ΡΡΡΡΠΎΠ³ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ?
ΠΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΡΡΠΎ Ρ ΠΡΡΡΠ±ΠΈ. ΠΠΎΠ³Π΄Π° Ρ Π΄Π΅Π»Π°Ρ import { Link } from '@material-ui/core'
Ρ ΠΏΠΎΠ»ΡΡΠ°Ρ:
Can't resolve '@emotion/core' in 'node_modules/@material-ui/styled-engine'
File: node_modules/@material-ui/styled-engine/index.js
Can't resolve '@emotion/styled' in '/node_modules/@material-ui/styled-engine'
File: node_modules/@material-ui/styled-engine/index.js
ΠΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Π½Π° import Link from '@material-ui/core/Link'
ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΠΈΡΡΠ΅Π·Π»Π°.
ΠΡΠ»ΠΈ Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Ρ @emotion/styled @emotion/core
Ρ ΠΏΠΎΠ»ΡΡΡ:
ΠΠ΅ ΡΠ΄Π°Π΅ΡΡΡ ΡΠ°Π·ΡΠ΅ΡΠΈΡΡ Β«@ ΡΠΌΠΎΡΠΈΡ / ΡΠ΅Π°ΠΊΡΠΈΡΒ» Π² Β«/ node_modules / @ ΡΠΌΠΎΡΠΈΡ / ΡΡΠΈΠ»Ρ / ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅Β»
ΠΠ°ΡΠ΅ΠΌ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Ρ @emotion/react
.
ΠΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ ΠΎΡΠΈΠ±ΠΊΠ° Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
Error: The `@emotion/core` package has been renamed to `@emotion/react`. Please import it like this `import { jsx } from '@emotion/react'`.
./node_modules/@emotion/core/dist/emotion-core.cjs.dev.js
node_modules/@emotion/core/dist/emotion-core.cjs.dev.js:3
Π£ΡΠ°ΡΡΠ²ΡΡΡΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ ΠΏΠ°ΠΊΠ΅ΡΠ°:
"@emotion/core": "^11.0.0",
"@emotion/react": "^11.0.0",
"@emotion/styled": "^11.0.0",
"@material-ui/core": "^5.0.0-alpha.15",
"@material-ui/lab": "^5.0.0-alpha.15",
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π²Π΅ΡΡΠΈΠΈ v10 ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² Emotion
Oh 11 - ΡΡΠΎ ΡΠ°ΠΌΠ°Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ Π²Π΅ΡΡΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ Ρ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ mui Π½ΡΠΆΠ½ΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ ΠΈΠ»ΠΈ Π·Π°Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ
Oh 11 - ΡΡΠΎ ΡΠ°ΠΌΠ°Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ Π²Π΅ΡΡΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ Ρ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ mui Π½ΡΠΆΠ½ΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ ΠΈΠ»ΠΈ Π·Π°Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ
Π£ Π½Π°Ρ ΡΡΠΎ Π·Π°Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ΠΎ ΡΠ΅ΡΠ΅Π· Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Ρ Π²Π΅ΡΡΠΈΠΉ Π² peerDependencies
. ΠΡ Π½Π΅ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΈ ΠΎΠ± ΡΡΠΎΠΌ ΡΠ²Π½ΠΎ Π² ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡΡ
ΠΏΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΠΌ Π² Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ Π΅Π³ΠΎ Π΄ΠΎ Π²Π΅ΡΡΠΈΠΈ 11.
ΠΡΡΠΆΠ΅ΡΠΊΠΎΠ΅ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΠΎ Π°Π»ΡΡΠ° ΠΈ ΡΠΌΠΎΡΠΈΡ 11 Π²ΡΠ΅Π³ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄. ΠΠ°ΠΊ ΡΠ°Π½Π½ΠΈΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠΆΠΈΠ΄Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ΅ΡΠΎΡ ΠΎΠ²Π°ΡΠΎΡΡΠ΅ΠΉ.
ΠΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Ρ, Ρ Π·Π΄Π΅ΡΡ Π½ΠΎΠ²Π΅Π½ΡΠΊΠΈΠΉ, ΠΈ Ρ ΠΈΡΠΊΠ°Π» ΡΠ΅ΡΠ΅Π½ΠΈΡ css material-ui ΠΈ ΠΏΠΎΠ΄ΠΎΡΠ΅Π» ΠΊ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅.
ΠΡΠ΄Π°Π² ΡΠ²ΠΎΠΈ 2 ΡΠ΅Π½ΡΠ° Π½Π° ΡΡΠΎ, Ρ Ρ
ΠΎΡΠ΅Π» Π±Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΡΡ ΠΠΈΠ½Π°ΡΠΈΡ https://github.com/callstack/linaria.
ΠΡΠΎ Π½ΡΠ»Π΅Π²Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Ρ ΠΈΠ·Π²Π»Π΅ΡΠ΅Π½ΠΈΠ΅ΠΌ css ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ CSS Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΠ° React.
ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π² ΡΡΠΎΠΌ RFC π.
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΡΡΡΡΠΏΠ°Ρ Π² ΡΠΎΠ»ΠΈ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡΠ΅Π³ΠΎ Emotion - Π·Π²ΡΡΠΈΡ Π·Π΄ΠΎΡΠΎΠ²ΠΎ π
ΠΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π²ΡΠΏΡΡΡΠΈΡΡ Π² Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π½ΠΎΠ²ΡΠΉ ΠΊΡΡΠΏΠ½ΡΠΉ ΠΏΡΠΎΠ΄ΡΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π²ΠΎΠ»ΡΡΠΈΠ΅ΠΉ, ΡΠΎΠ»ΡΠΊΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΈΡΡΠΊΠΈ, ΠΎΠ±ΡΠΈΠ΅ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ, ΡΠΊΡΡΡΡΠ΅ Π·Π°ΡΠ΅ΠΏΠΊΠΈ ΠΈ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΡΠΈΠΏΠΎΠ² TS (Π»ΡΡΡΠΈΠΉ Π²ΡΠ²ΠΎΠ΄ ΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ).
ΠΡ , ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠ°Π½Π½ΡΠΉ ΠΏΠ°ΡΡΠ΅Ρ! ΡΡΠΎ ΡΡΡΡΠ°Π½ΡΠ΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΡΠ°Π΅Π²ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ Π² Emotion ΠΈ Styled-Components (Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ½ΠΈ ΠΎΠ±Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ ΠΏΠ°ΡΡΠ΅Ρ). ΠΠ½ ΠΈ ΠΌΠ΅Π½ΡΡΠ΅, ΠΈ Π±ΡΡΡΡΠ΅Π΅.