Material-ui: [RFC] РСшСниС для стилизации v5 πŸ’…

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 24 Π°Π²Π³. 2020  Β·  105ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: mui-org/material-ui

Π­Ρ‚ΠΎΡ‚ RFC прСдставляСт собой ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ измСнСнию Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ стилизации Material-UI Π² v5.

TL: DR;

Π’ Ρ‡Π΅ΠΌ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°?

  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ Π΄Π²ΠΈΠΆΠΊΠ° для модСлирования Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ количСства Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. ΠœΡ‹ испытали это Π½Π° собствСнном ΠΎΠΏΡ‹Ρ‚Π΅. Π—Π° послСдниС 12 мСсяцСв ΠΌΡ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Π»ΠΈ ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π½Π° нашС основноС цСнностноС ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, Π° Π½Π΅ Π½Π° ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ Π΄Π²ΠΈΠΆΠΊΠ° стилСй. Π Π°Π±ΠΎΡ‚Π° Π½Π°Π΄ Π½ΠΈΠΌ ΠΈΠΌΠ΅Π΅Ρ‚ высокиС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΈΠ·Π΄Π΅Ρ€ΠΆΠΊΠΈ.
  • ΠœΡ‹ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΠ»ΠΈΡΡŒ с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ΅ динамичСских стилСй для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ нашСй Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… динамичСских стилСй (Π½Π° основС свойств) нСвысока (см. ВСсты ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π½ΠΈΠΆΠ΅). Π­Ρ‚ΠΎ ΡΠ΅Ρ€ΡŒΠ΅Π·Π½ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ качСство прСдоставляСмых Π½Π°ΠΌΠΈ возмоТностСй для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². Π­Ρ‚ΠΎ Π±Π»ΠΎΠΊΠΈΡ€Π°Ρ‚ΠΎΡ€ для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ нашСго API с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния настраиваСмости ΠΈΠ»ΠΈ простоты написания стилСй. НапримСр, ΠΎΠ½ Ρ€Π°Π·Π±Π»ΠΎΠΊΠΈΡ€ΡƒΠ΅Ρ‚: ΡΡ‚ΠΈΠ»ΡŒ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚ Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Π° , Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Ρ†Π²Π΅Ρ‚Π° ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ .
  • БообщСство React Π² Ρ†Π΅Π»ΠΎΠΌ Π½Π΅ проголосовало Π·Π° ΠΌΠ°ΡΡˆΡ‚Π°Π±Π½ΠΎΠ΅ использованиС JSS (JSS Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ΅Π½ ΠΈ всС Π΅Ρ‰Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ). 3 Π³ΠΎΠ΄Π° Π½Π°Π·Π°Π΄ ΠΌΡ‹ сдСлали ставку Π½Π° Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΈΠ· ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΡ…ΡΡ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² . ΠœΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΈΠ·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ сСйчас доступны Π»ΡƒΡ‡ΡˆΠΈΠ΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹. ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ быстрСС ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠΈΠΉ DX / UX, ΠΎΠΏΠΈΡ€Π°ΡΡΡŒ Π½Π° Π±ΠΎΠ»Π΅Π΅ популярноС, ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для стилизации.
  • МногиС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ стилизованныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ для пСрСопрСдСлСния стилСй Material-UI. ΠšΠΎΠ½Π΅Ρ‡Π½Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ²Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Π² ΠΈΡ… ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡ‚Π΅ Π΅ΡΡ‚ΡŒ Π΄Π²Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ CSS-in-JS. НС Ρ…ΠΎΡ€ΠΎΡˆΠΎ. Π‘Ρ‹Π»ΠΎ Π±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅, Ссли Π±Ρ‹ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Π°Π΄Π°ΠΏΡ‚Π΅Ρ€Ρ‹ для Ρ€Π°Π·Π½Ρ‹Ρ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ CSS-in-JS. (Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹: Π½Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠ΅Ρ€Π΅ΠΏΠΈΡΠ°Ρ‚ΡŒ основныС стили, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ соотвСтствовали синтаксису ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ Π΄Π²ΠΈΠΆΠΊΠ° πŸ€·β€β™€οΈ)

КакиС трСбования?

Какой Π±Ρ‹ Π΄Π²ΠΈΠΆΠΎΠΊ ΠΌΡ‹ Π½ΠΈ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ, ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Ρ„Π°ΠΊΡ‚ΠΎΡ€Ρ‹:

  • ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ: Ρ‡Π΅ΠΌ быстрСС, Ρ‚Π΅ΠΌ Π»ΡƒΡ‡ΡˆΠ΅, Π½ΠΎ ΠΌΡ‹ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ ΠΏΠΎΠΆΠ΅Ρ€Ρ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ DX.
  • Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΠ°ΠΊΠ΅Ρ‚Π°: Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ссли Π±Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΠ°ΠΊΠ΅Ρ‚Π° Π±Ρ‹Π» мСньшС Π½Π°ΡˆΠΈΡ… Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΡ…
  • ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€Π΅ΠΆΠΈΠΌΠ°: @material-ui/styles ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‡Π°ΡΡ‚ΠΈΡ‡Π½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ‚ написания ΡΡ‚Π°Ρ‚ΡŒΠΈ.
  • ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° SSR
  • простая настройка
  • Ρ€Π°Π·Ρ€Π΅ΡˆΠΈΡ‚ΡŒ динамичСский ΡΡ‚ΠΈΠ»ΡŒ
  • Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ сообщСства
  • Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ°
  • плоская спСцифика
  • RTL
  • Машинопись

Π‘Ρ‹Π»ΠΎ Π±Ρ‹ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ, Ссли Π±Ρ‹ ΠΎΠ½ ΠΌΠΎΠ³ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

  • zero-config с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΈΡ‚Π΅Π»Π΅ΠΉ Material-UI
  • ΠΏΠΎΡ‚ΠΎΠΊΠΎΠ²ΠΎΠ΅ https://github.com/mui-org/material-ui/issues/8503
  • исходная ΠΊΠ°Ρ€Ρ‚Π°

КакиС Ρƒ нас Π΅ΡΡ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹?

  • стилизованныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹
  • эмоция
  • JSS (Π² настоящСС врСмя Π·Π°Π²Π΅Ρ€Π½ΡƒΡ‚Ρ‹ΠΉ Π² material-ui)
  • стилСтрон
  • Афродита
  • Ρ„Π΅Π»Π°
  • Π΅Ρ‰Π΅?

Π‘Ρ€Π°Π²Π½Π΅Π½ΠΈΠ΅

Π‘ΠΏΠ΅ΠΊΡ‚Π°ΠΊΠ»ΡŒ

Π’ΠΎΡ‚ тСсты с динамичСскими стилями Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… популярных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ (ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π² Material-UI v4 ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ статичСскиС стили, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ…ΠΎΡ€ΠΎΡˆΡƒΡŽ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ):

PR для справки: https://github.com/mnajdova/react-native-web/pull/1

ΠžΡΠ½ΠΎΠ²Ρ‹Π²Π°ΡΡΡŒ Π½Π° ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, я Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ: JSS (Π² настоящСС врСмя Π·Π°Π²Π΅Ρ€Π½ΡƒΡ‚Ρ‹ΠΉ Π² @ material-ui / styles), styletron ΠΈ fela. Π­Ρ‚ΠΎ оставит нас с:

  • стилизованныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹
  • эмоция
  • Афродита
  • JSS
  • React-styletron
  • Ρ„Π΅Π»Π°

ДинамичСский Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚

Будя ΠΏΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ вопросам, каТСтся, Ρ‡Ρ‚ΠΎ Афродита Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ динамичСскиС Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Ρ‹: https://github.com/Khan/aphrodite/issues/141
Ρ‡Ρ‚ΠΎ, Π½Π° ΠΌΠΎΠΉ взгляд, ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈ этот Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΈΠ· Π½Π°ΡˆΠΈΡ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ², оставив Π½Π°ΠΌ:

  • стилизованныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹
  • эмоция
  • Афродита
  • React-styletron

npm

Π₯отя styled-components ΠΈ emotion - ΠΎΠ±Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ довольно популярны, react-styletron Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ‚ написания сильно отстаСт: ΠΎΠΊΠΎΠ»ΠΎ 12500 Π·Π°Π³Ρ€ΡƒΠ·ΠΎΠΊ Π² нСдСлю (это, Π½Π° ΠΌΠΎΠΉ взгляд, вСская ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°. ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΡΡ‚Ρ€Π°Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ, Ссли ΠΌΡ‹ Ρ€Π΅ΡˆΠΈΠΌ ΠΏΠΎΠΉΡ‚ΠΈ с этим, сообщСству снова Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π΄Π²Π° Ρ€Π°Π·Π½Ρ‹Ρ… ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠ° стилизации Π² своих прилоТСниях).

Π’ΠΎΡ‚ список, Ρ€Π°Π½ΠΆΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΏΠΎ количСству Π΅ΠΆΠ΅Π½Π΅Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π·Π°Π³Ρ€ΡƒΠ·ΠΎΠΊ Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ‚ написания:



ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ сборник рассказов зависит ΠΎΡ‚ эмоций.

  • стилизованныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹
  • эмоция
  • React-styletron

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Ρ€Π΅ΠΆΠΈΠΌΠ°

  • эмоция: ДА . Начиная с вСрсии 10, ΠΎΠ½ совмСстим со строгим Ρ€Π΅ΠΆΠΈΠΌΠΎΠΌ Π½Π° основС ΠΈΡ… анонса . Π― протСстировал Π΅Π³ΠΎ Π½Π° простом ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΊΠ°ΠΊ оТидалось.
  • стилизованныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹: Частично . Π•ΡΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ ΠΎΠ΄Π½Π° ошибка с Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ стилями Π² строгом Ρ€Π΅ΠΆΠΈΠΌΠ΅.

Π‘Π‘Π 

Π—Π²Π΅Π·Π΄Ρ‹

  • стилизованныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹: 30,6 ΠšΠ‘
  • эмоции: 11,4 тыс.
  • JSS : 5,9 ΠšΠ‘

Π’Ρ€Π°Ρ„ΠΈΠΊ ΠΏΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎΠ΅ количСство сСансов Π² SimilarWeb Π² мСсяц:

  • sass-lang.com : ~ 476K / мСс (для сравнСния)
  • styled-components.com: ~ 239 тыс. / мСсяц
  • эмоция.sh: ~ 59 ΠšΠ‘ / мСсяц
  • cssinjs.org : <30

ΠžΡ‚Π·Ρ‹Π²Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ

Богласно опросу, 53,8% ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ стили Material-UI (JSS), Ρ‡Ρ‚ΠΎ Π½Π΅ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это Π΄Π²ΠΈΠΆΠΎΠΊ, исходящий ΠΎΡ‚ Material-UI. Однако ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ, Ρ‡Ρ‚ΠΎ 20,4% ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ² ΡƒΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ стилизованныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, Ρ‡Ρ‚ΠΎ являСтся большим числом, учитывая, Ρ‡Ρ‚ΠΎ Ρƒ нас Π½Π΅Ρ‚ прямой ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ для этого. Богласно опросу, эмоции ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΎΠΊΠΎΠ»ΠΎ 1,9% Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

ИмСя эти числа, ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ стилизованных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

  • эмоции: соврСмСнныС Π²Π΅Ρ‡Π½ΠΎΠ·Π΅Π»Π΅Π½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ + IE11
  • styled-components: Π½Π΅ Π·Π°Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ для v5, Π½ΠΎ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠ΅ вСрсии ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅

Π Π°Π·ΠΌΠ΅Ρ€ связки

  • эмоция: 11,2 ΠšΠ‘
  • стилизованныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹: 12,5 ΠšΠ‘

Какой Π»ΡƒΡ‡ΡˆΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚?

Π”Π²ΠΈΠ³Π°Ρ‚Π΅Π»ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

Π”Π°ΠΆΠ΅ Ссли ΠΌΡ‹ Ρ€Π΅ΡˆΠΈΠΌ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ нСсколько Π΄Π²ΠΈΠΆΠΊΠΎΠ², Π½Π°ΠΌ всС Ρ€Π°Π²Π½ΠΎ придСтся ΠΎΡ‚ΡΡ‚Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π² дСмонстрациях.

стилизованныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

ΠŸΠ»ΡŽΡΡ‹:

  • Π˜ΠΌΠ΅Π΅Ρ‚ самоС большоС сообщСство, люди Π»ΡŽΠ±ΡΡ‚ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.
  • ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ начиная с v5 Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ.

ΠœΠΈΠ½ΡƒΡΡ‹:

  • Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ·Π½Π°Ρ‡Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ всС стили ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ созданы с использованиСм styled API, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Ρƒ Π½ΠΈΡ… всСгда Π±ΡƒΠ΄ΡƒΡ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹-ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ, Ссли ΠΈΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ.
  • ΠžΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΠΈΠ΅ ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ прСпятствия Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ.

эмоция

ΠŸΠ»ΡŽΡΡ‹:

  • БообщСство ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ большоС, растущСС.
  • Π₯ΠΎΡ€ΠΎΡˆΠ΅Π΅ исполнСниС.
  • ΠŸΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ + SSR Π²ΠΎΠ·ΠΌΠΎΠΆΠ΅Π½ ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ.
  • Бвойство CSS ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для пСрСопрСдСлСния.
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° исходной ΠΊΠ°Ρ€Ρ‚Ρ‹.
  • Π§ΡƒΡ‚ΡŒ мСньшС.

ΠœΠΈΠ½ΡƒΡΡ‹:

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ…

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ нСсколько Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ CSS-in-JS, прСдоставив для Π½ΠΈΡ… наши собствСнныС Π°Π΄Π°ΠΏΡ‚Π΅Ρ€Ρ‹. НСкоторыС Π²Π΅Ρ‰ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ, это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρƒ нас ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ дублированная Ρ€Π°Π±ΠΎΡ‚Π° Π½Π°Π΄ стилями, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ синтаксис ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ отличаСтся (ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, jss ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ со стилями-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ / эмоциями). ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Ρ‚Π΅ΠΌΡ‹ нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΌΡ‹ Π²Ρ‹Π±Π΅Ρ€Π΅ΠΌ.

МСнСС задСйствованная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° для этого ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΎΡ‚ использования styled , ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ люди ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ Π²Π΅Π±-ΠΏΠ°ΠΊΠ΅Ρ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ - (это просто Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ).

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

Π”Π΅Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΈΠΌΠ΅Π½Π° классов ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π°Ρ†Π΅Π»Π΅Π½Ρ‹ Π½Π° настраиваСмыС стили

Π§Ρ‚ΠΎ касаСтся Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ выглядят классы ΠΈ ΠΊΠ°ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π° Π½ΠΈΡ… ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ, я Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ сравнСниС Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Ρƒ нас Π΅ΡΡ‚ΡŒ Π² настоящСС врСмя, ΠΈ Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°.

Π’ качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π²ΠΎΠ·ΡŒΠΌΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Slider. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ сСйчас выглядит сгСнСрированный DOM:

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· классов ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΎΠΏΠΈΡΠ°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ сСмантику, ΠΈ люди ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти классы для пСрСопрСдСлСния стилСй ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.

Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, эмоции, стилизованныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈΠ»ΠΈ любая другая подобная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° создаст Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…Π΅Ρˆ Π² качСствС ΠΈΠΌΠ΅Π½ΠΈ класса. Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ ΠΈ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Ρ‚Ρƒ ΠΆΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ для классов Ρ‚Π°Ρ€Π³Π΅Ρ‚ΠΈΠ½Π³Π°, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ классы, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° основС свойств.

Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π»ΠΎ Π±Ρ‹, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠΌΠΈΠΌΠΎ классов, сгСнСрированных эмоциями, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ классы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρƒ нас Π±Ρ‹Π»ΠΈ Ρ€Π°Π½Π΅Π΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ MuiSlider-root & MuiSlider-colorPrimary , СдинствСнная Ρ€Π°Π·Π½ΠΈΡ†Π° Π±ΡƒΠ΄Π΅Ρ‚ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ эти классы Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π² качСствС сСлСкторов, Π° Π½Π΅ для опрСдСлСния стилСй для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ ΠΊΠ°ΠΊ ΠΊΡ€ΡŽΡ‡ΠΎΠΊ - useSliderClasses

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

НСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΌΡ‹ Π²Ρ‹Π±Π΅Ρ€Π΅ΠΌ, ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ styled API, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ поддСрТиваСтся ΠΎΠ±ΠΎΠΈΠΌΠΈ ΠΈΠ· Π½ΠΈΡ…. Π­Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π½Π°ΠΌ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ стилизованных + Π½Π΅ стилизованных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² (Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, с псСвдонимами webpack, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для использования preact).

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ исслСдовали Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρƒ нас Π±Ρ‹Π»ΠΈ, основная ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π½Π°ΠΌ Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с эмоциями . НСкоторыС ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ элСмСнты:

НСбольшая ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ ΠΌΠΈΠ³Ρ€Π°Ρ†ΠΈΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ стилизованными ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ ΠΈ эмоциями.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ, ΡƒΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ стилизованныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эмоции практичСски Π±Π΅Π· усилий.

Π•ΡΡ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ способы добавлСния ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ, ΠΊΡ€ΠΎΠΌΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° cx + css ΠΎΡ‚ эмоций ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π΅ Π² качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ для добавлСния ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ стиля, Ссли ΠΎΠ½ΠΈ Π½Π΅ хотят ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ.

ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ поддСрТиваСтся ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ: +1:

ΠŸΡ€Π΅ΡΡ‚ΠΈΠΆΠ½ΠΎΡΡ‚ΡŒ @ryancogswell Π·Π° Π±ΠΎΠ»Π΅Π΅ Π³Π»ΡƒΠ±ΠΎΠΊΠΎΠ΅ исслСдованиС этой Ρ‚Π΅ΠΌΡ‹. Пока ΠΌΡ‹ Π½Π΅ нашли Π² ΠΊΠΎΠ΄Π΅ @emotion Π½ΠΈΡ‡Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠ³Π»ΠΎ Π±Ρ‹ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ опасСния, Ρ‡Ρ‚ΠΎ ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.
ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ рассматривали createGlobalStyle ΠΈΠ· styled-components Π² сравнСнии с Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ эмоций. Он выполняСт Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ своСй Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π²ΠΎ врСмя Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° (Ρ‡Ρ‚ΠΎ ΠΏΠΎ своСй сути ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π½ΠΎ для строгого / ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€Π΅ΠΆΠΈΠΌΠ°) ΠΈ просто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ useEffect для удалСния стилСй Π² своСй Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ очистки. createGlobalStyle Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠ΅Ρ€Π΅ΠΏΠΈΡΠ°Ρ‚ΡŒ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅ - для Π½Π΅Π³ΠΎ нСльзя Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ стили Π²ΠΎ врСмя Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°, Ссли этот Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ фиксируСтся. ΠŸΠΎΡ…ΠΎΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΊΡ‚ΠΎ-Ρ‚ΠΎ пытался ΠΏΠ΅Ρ€Π΅ΠΏΠΈΡΠ°Ρ‚ΡŒ Π΅Π³ΠΎ с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ измСнСниями Π² ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΌ мСсяцС, поэтому Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° этим прогрСссом.

Как обрабатываСтся спСцифика

Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Emotion Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽΡ‚ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ CSS Π² ΠΎΠ΄ΠΈΠ½ класс, Π° Π½Π΅ ΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ стили ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΈΠΌΠ΅Π½ классов. Π’ вСрсии 5 наши ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠΌΠ΅Π½Π° классов Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½Ρ‹Ρ… ΠΊ Π½ΠΈΠΌ стилСй. ΠšΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π² стилС эмоций автоматичСски ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ стили Π² ΠΎΠ΄ΠΈΠ½ класс. Π­Ρ‚ΠΎ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ избавляСт ΠΎΡ‚ этих ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ с порядком Ρ‚Π°Π±Π»ΠΈΡ† стилСй, ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… для стилСй, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Π² Material-UI, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ стили ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ класса: +1 :.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρƒ нас Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠΌΠ΅Π½Π° Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Ρ… классов (для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ способами для настройки), Π° Π·Π°Ρ‚Π΅ΠΌ ΠΎΠ΄Π½ΠΎ сгСнСрированноС (ΠΏΠΎ эмоциям) имя класса для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ всС источники CSS, Π²Ρ‚Π΅ΠΊΠ°ΡŽΡ‰ΠΈΠ΅ Π² Π½Π΅Π³ΠΎ.
Π—Π°Ρ‚Π΅ΠΌ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΡΡ‚ΡŒ обрабатываСтся эмоциями Π² зависимости ΠΎΡ‚ порядка ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ.
ВсС ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ эмоции (Π±ΡƒΠ΄ΡŒ Ρ‚ΠΎ композиция Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° ΠΈΠ»ΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ опрСдСлСния), приводят ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ классу элСмСнта.
styled-components НЕ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° (композиция Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ опрСдСлСния Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ΡΡ Π² ΠΎΠ΄ΠΈΠ½ класс). Одна ΠΈ Ρ‚Π° ΠΆΠ΅ композиция Π² стилизованных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ… ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ нСсколько классов ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ элСмСнту, ΠΈ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ‡Π½ΠΎΡΡ‚ΡŒ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΊΠ°ΠΊ я ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π».

ΠΠ»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹


Π§Ρ‚ΠΎ Π²Ρ‹ Π΄ΡƒΠΌΠ°Π΅Ρ‚Π΅ ΠΎΠ± этом?

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Выступая Π² Ρ€ΠΎΠ»ΠΈ ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠΆΠ΄Π°ΡŽΡ‰Π΅Π³ΠΎ Emotion - Π·Π²ΡƒΡ‡ΠΈΡ‚ Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ πŸš€

ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² состоянии Π²Ρ‹ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π² блиТайшСС врСмя Π½ΠΎΠ²Ρ‹ΠΉ ΠΊΡ€ΡƒΠΏΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π΅Π²ΠΎΠ»ΡŽΡ†ΠΈΠ΅ΠΉ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ чистки, ΠΎΠ±Ρ‰ΠΈΠ΅ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ, скрытыС Π·Π°Ρ†Π΅ΠΏΠΊΠΈ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Ρ‚ΠΈΠΏΠΎΠ² TS (Π»ΡƒΡ‡ΡˆΠΈΠΉ Π²Ρ‹Π²ΠΎΠ΄ ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ).

ΠžΡ…, ΠΈ пСрСписанный парсСр! Ρ‡Ρ‚ΠΎ устраняСт Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΊΡ€Π°Π΅Π²Ρ‹Π΅ ошибки Π² Emotion ΠΈ Styled-Components (Π² настоящСС врСмя ΠΎΠ½ΠΈ ΠΎΠ±Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ парсСр). Он ΠΈ мСньшС, ΠΈ быстрСС.

ВсС 105 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

ВсСго лишь ΠΏΠ°Ρ€Π° исправлСний:

БообщСство 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 для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ свойства Ρ†Π²Π΅Ρ‚Π°, см. НиТС;
image

Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° Π½Π΅ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ»ΠΈ, Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π° Π½ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ являСтся ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄Π½Ρ‹ΠΌ ΠΎΡ‚ StyledComponent ΠΎΠ½ создаСт Π½ΠΎΠ²Ρ‹ΠΉ класс со всСми css-свойствами, скопированными ΠΈΠ· Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ StyledComponent . Рассмотрим Π½ΠΈΠΆΠ΅;

const DerivedComponent = styled(StyledComponent)`
  font-family: monospace;
`

Он создаСт Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ класс css, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ добавляСт font-family: monospace ΠΊ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡƒ Π²Ρ‹ΡˆΠ΅ классу css, сгСнСрированному ΠΈΠ· StyledComponent . Π’ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠ½ создаСт CSS, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ всС свойства скопированы ΠΈΠ· StyledComponent ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅;

image

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, Ссли Π²Ρ‹ΡˆΠ΅ StyledComponent ΠΈ DerivedComponent ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ вмСстС, Ρƒ нас (ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ) Π΅ΡΡ‚ΡŒ Π΄Π²Π° класса css, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ΡΡ свойства css (Ρ€Π°Π·Π»ΠΈΡ‡Π°ΡŽΡ‰ΠΈΠ΅ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ сСмСйством ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²). Как Π²ΠΈΠ΄Π½ΠΎ Π½ΠΈΠΆΠ΅;

image

Как Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ сСбС ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ, количСство классов 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 ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΡ‹ ΠΏΡ€ΠΈΡˆΠ»ΠΈ ΠΊ Π²Ρ‹Π²ΠΎΠ΄Ρƒ ΠΎΠ± эмоциях, Π½Π° самом Π΄Π΅Π»Π΅ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΏΡƒΠ½ΠΊΡ‚Π° Π² Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ

  • НСбольшая ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ ΠΌΠΈΠ³Ρ€Π°Ρ†ΠΈΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ стилизованными ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ ΠΈ эмоциями.
    Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ, ΡƒΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ стилизованныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эмоции практичСски Π±Π΅Π· усилий.
  • Π•ΡΡ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ способы добавлСния ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ, ΠΊΡ€ΠΎΠΌΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ
    ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° cx + css ΠΎΡ‚ эмоций ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π΅ Π² качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ для добавлСния ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ стиля, Ссли ΠΎΠ½ΠΈ Π½Π΅ хотят ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ.
  • ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ поддСрТиваСтся ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ πŸ‘
  • Как обрабатываСтся спСцифика

Помня ΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π΅, Ссли Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ хотят ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ наличия Π΄Π²ΡƒΡ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ css-in-js Π² ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡ‚Π΅, ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ ΠΌΠΈΠ³Ρ€Π°Ρ†ΠΈΠΈ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ°Π»Π° для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π½Π° эмоции + ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ API, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΎΡ‚ styled .

@ ko-toss, спасибо, Ρ‡Ρ‚ΠΎ написали это, это всС Ρ…ΠΎΡ€ΠΎΡˆΠΈΠ΅ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹. Π’ΠΎΡ‚ Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ эмоция Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΎΠ΄Π½ΠΎ имя класса со всСми стилями, Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ Π»ΡƒΡ‡ΡˆΠΈΠΌ срСдством для Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒΡΡ с сгСнСрированными мноТСствСнными ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ классов, Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ±Π΅Π΄ΠΈΡ‚ послСдний написанный класс, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ.

Π’ Π΄Ρ€ΡƒΠ³ΠΎΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ я использовал Π°Ρ‚ΠΎΠΌΠ°Ρ€Π½Ρ‹ΠΉ css, Π³Π΄Π΅ ΠΏΠΎΡ‚Ρ€Π΅Π±Π»Π΅Π½ΠΈΠ΅ памяти Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ всС ΠΏΡ€Π°Π²ΠΈΠ»Π° css Π·Π°ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·, Π½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ прСдсказуСмыС пСрСопрСдСлСния Ρ‚Π°ΠΌ довольно слоТно, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ className являСтся ΠΎΠ΄Π½ΠΈΠΌ Π°Ρ‚ΠΎΠΌΠ°Ρ€Π½Ρ‹ΠΌ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎΠΌ, ΠΈ снова ΠΊΠ°ΠΊΠΎΠ΅ ΠΈΠ· Π½ΠΈΡ… Π²Ρ‹ΠΈΠ³Ρ€Ρ‹Π²Π°Π΅Ρ‚, зависит ΠΎΡ‚ порядка, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ΠΈ написаны, Ссли Π²Ρ‹ Π½Π΅ Ρ€Π΅ΡˆΠΈΡ‚Π΅ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ всС стили ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΈΡ… ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.

Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, я ΡΡ‡ΠΈΡ‚Π°ΡŽ, Ρ‡Ρ‚ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ любоС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ css-in-js, люди Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ просто случайным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ бСсконСчныС ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ стилСй, ΠΎΠ½ΠΈ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ довольно структурированы Π½Π° основС значСния props.

Однако, ΠΎΠΏΡΡ‚ΡŒ ΠΆΠ΅, это Ρ…ΠΎΡ€ΠΎΡˆΠΈΠ΅ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΠΌΠ΅Ρ‚ΡŒ Π² Π²ΠΈΠ΄Ρƒ, большоС спасибо Π·Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ подСлились ΠΈΠΌΠΈ πŸ‘

  • Π΅Ρ‰Π΅?

ΠΊΠ°ΠΊ насчСт совмСстимости ΠΈΠ΄Π΅ΠΈ [стиля] (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, [style9])

  • Π΅Ρ‰Π΅?

style9 ΠΈΠ»ΠΈ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π΄Π²ΠΈΠΆΠΎΠΊ CSS, совмСстимый с ΠΈΠ΄Π΅Π΅ΠΉ стиля.

ΠŸΠΎΡ…ΠΎΠΆΠ΅, это Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ настройки Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ сборки, Ρ‡Ρ‚ΠΎ ΠΎΡ‚Ρ‚ΠΎΠ»ΠΊΠ½Π΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΈΡ… людСй ΠΎΡ‚ Π΅Π³ΠΎ использования, особСнно Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ².

(это скорСС ΠΊ свСдСнию, эмоции - Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€)

https://github.com/cristianbote/goober (1 ΠšΠ‘, ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Ρ‡ΡƒΡ‚ΡŒ Ρ…ΡƒΠΆΠ΅ эмоций)

Π£ мСня Π΅Ρ‰Π΅ Π½Π΅Ρ‚ ΠΎΠΏΡ‹Ρ‚Π° Π² этом, Π½ΠΎ я Ρ…ΠΎΡ‡Ρƒ ΠΎΠ΄Π½Π°ΠΆΠ΄Ρ‹ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ.
image
image

@cztomsik ΠŸΠΎΡ…ΠΎΠΆ Π½Π° https://github.com/kuldeepkeshwar/filbert-js, Π½ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ синтаксис JavaScript (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ строка шаблона CSS)

Π’ΠΎΡ‚ нСсколько тСстов, ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ google lighthouse ΠΏΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ взаимодСйствия:

https://jantimon.github.io/css-framework-performance/

css-lighthouse-scores

К Π²Π°ΡˆΠ΅ΠΌΡƒ свСдСнию, я ΠΏΡ€ΠΎΠ²Π΅Π» нСсколько ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹Ρ… тСстов для стилизованных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² v5, эмоций v10 ΠΈ эмоций v11, с / Π±Π΅Π· ΠΏΠ»Π°Π³ΠΈΠ½Π° babel, с Π²Π°Π½ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ API, css props API ΠΈ стилизованным API. НадСюсь, это ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π² обсуТдСнии!

https://github.com/simnalamburt/css-in-js-benchmark

Рассматривали Π»ΠΈ Π²Ρ‹ Π½ΠΎΠ²ΡƒΡŽ Π²ΠΎΠ»Π½Ρƒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ 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 Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ создан Π²ΠΎ врСмя выполнСния.


Π”ΡƒΠΌΠ°ΡŽ, идСально Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ с Π½ΡƒΠ»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠ΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π½ΡƒΠ»Π΅Π²Ρ‹ΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ выполнСния.

Π― Π΄ΡƒΠΌΠ°ΡŽ, Π²Ρ‹ ΠΏΠΎΠΏΠ°Π»ΠΈ Π² ΡΠ°ΠΌΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ. Π‘Ρ‹Π»ΠΎ Π±Ρ‹ ΡƒΡ‚ΠΎΠΏΠΈΡ‡Π½ΠΎ Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎ просто ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это, Π½Π΅ΠΆΠ½ΠΎ мСчтая .

Π•ΡΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ΄Π΅ΠΈ для изучСния ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ сотрудничСство. НСкоторыС ΠΊΠΎΠ΄Ρ‹ ΠΈ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ ΠΌΠ½Π΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ‡ΡƒΠΆΠ΄Ρ‹, поэтому я Π½Π΅ ΠΌΠΎΠ³Ρƒ Π²Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π² подробности. Π’ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ мСня Π²ΠΎΠ»Π½ΡƒΡŽΡ‚:

  • БтатичСский Π°Π½Π°Π»ΠΈΠ· - это большой вопрос. Волько ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для стилизации, ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ Π½Π° основС ΠΏΡ€Π°Π²ΠΈΠ»Π° X, соглашСния ΠΈΠ»ΠΈ спСцификации, ΠΈ Π²Π°ΠΌ ΠΏΠΎΠΊΠ°ΠΆΡƒΡ‚, Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ
  • НулСвой ΠΊΠΎΠ½Ρ„ΠΈΠ³ - хотя я Π±Ρ‹ ΠΎΡ‚Π΄Π°Π» большС свободы Π² ΠΏΠΎΠ»ΡŒΠ·Ρƒ Π»Π΅Π½ΠΈ (установка ΠΏΠ»Π°Π³ΠΈΠ½Π° для x bundler)
  • CSS-in-JSS для чистого 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 ΠΊΠ°Ρ€Ρ‚ :

На 500 ΠΊΠ°Ρ€Ρ‚ :

Для 2500 ΠΊΠ°Ρ€Ρ‚ :

Π’ Ρ†Π΅Π»ΠΎΠΌ, emotion ΠΈ styled-components ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠΈ ΠΏΠΎ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, makeStyles каТСтся Π² 2-4 Ρ€Π°Π·Π° быстрСС ΠΏΡ€ΠΈ ΠΌΠΎΠ½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ быстрСС пСрСрисовываСт 6-8x для ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ.

Π Π°Π·Π½ΠΈΡ†Π° достаточно Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ, особСнно ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ выполняСм Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π½Π° устройствах с Π½ΠΈΠ·ΠΊΠΈΠΌ энСргопотрСблСниСм, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ наши Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Ρ‹ ... ΠΈ Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ дрянных Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ΠΎΠ².

ВсС это Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ мСня бСспокоит пСрСнос ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² ΠΈ использованиС ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ emotion , Ρ‡Ρ‚ΠΎ снизит ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² ΠΈ сайтов, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΡ… Π΅Π³ΠΎ, Π² 3-5 Ρ€Π°Π·. (На самом Π΄Π΅Π»Π΅ это Π½Π΅ Ρ‚Π°ΠΊ, это зависит ΠΎΡ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°; Ρ‡Π΅ΠΌ ΠΎΠ½ слоТнСС, Ρ‚Π΅ΠΌ мСньшС Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠΉ).

НСкоторыС вопросы ΠΈ ΠΏΠΈΡ‰Π° для Ρ€Π°Π·ΠΌΡ‹ΡˆΠ»Π΅Π½ΠΈΠΉ:

  • Π”Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»ΠΈ DX стоит компромисса с UX? Π”Π°ΠΆΠ΅ DX спорСн, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ makeStyles
  • ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с makeStyles связана с динамичСскими стилями, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅, каТСтся, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ, Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π² Π΄Π΅Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ кСша. Π’ настоящСС врСмя ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ экзСмпляр ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ свой собствСнный ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ для динамичСских свойств, Π΄Π°ΠΆΠ΅ Ссли свойства ΠΈ стили Π²Ρ‹Π²ΠΎΠ΄Π° ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Π½Π°ΠΊΠ»Π°Π΄Π½Ρ‹ΠΌ расходам Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ выполнСния, мноТСству Ρ‚Π΅Π³ΠΎΠ² стилСй Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ ΠΈ сниТСнию ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ SSR. ΠšΠ°ΠΆΠ΅Ρ‚ΡΡ, это ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΡ‚Ρ€Π°Ρ‚Π΅Π³ΠΈΡŽ Ρ…Π΅ΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ для динамичСских стилСй, ΠΊΠ°ΠΊ это Π΄Π΅Π»Π°ΡŽΡ‚ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ CSS Π² JS-Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°Ρ…. По Ρ‚Π΅ΠΌΠ΅: https://github.com/mui-org/material-ui/pull/16858
  • Π•ΡΡ‚ΡŒ Π»ΠΈ возмоТности для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ emotion ΠΈ styled-components Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ±Π»ΠΈΠ·ΠΈΡ‚ΡŒΡΡ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΡΡ‚Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ makeStyles ?
  • Π‘ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ Material UI ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π°Π΄Π°ΠΏΡ‚Π΅Ρ€ Π΄Π²ΠΈΠΆΠΊΠ° JSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³Π»ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π΅Π³ΠΎ для большСй ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ?

Π― ΠΌΠΎΠ³Ρƒ ΠΆΠΈΡ‚ΡŒ с нСбольшой ΠΏΠΎΡ‚Π΅Ρ€Π΅ΠΉ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

Ни 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 Ρ€Π°Π· быстрСС для ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π»ΡƒΡ‡ΡˆΠ΅Π΅ ΠΊΠ΅ΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ / ΠΌΠ΅ΠΌΠΎΠΈΠ·Π°Ρ†ΠΈΡŽ? Однако я Π½Π΅ понимаю Ρ‚Π΅Ρ… цСнностСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅. ΠœΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΌ ссылкам?

Screenshot 2020-09-22 092415
Screenshot 2020-09-22 092514

@satazor Π― Π½Π΅ Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ ваши тСстовыС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ эквивалСнтны. Π£ нас Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ.

НСсколько ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΈ это ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ Π² ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ:

  • Установка ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Π·Π°Ρ‚Ρ€Π°Ρ‚, особСнно ΠΏΡ€ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π΅ ΠΈΡ… большого количСства. makeStyles ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ div Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ, Π° Emotion / sc создаСт Π½ΠΎΠ²Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Π’ нашСм тСстС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ я испытал, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ добавляСт Π±Π°Π·ΠΎΠ²ΠΎΠ΅ врСмя Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°, поэтому, Ссли 3 уровня ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² => x3 (ΠΈΠ»ΠΈ ΠΏΠΎΡ‡Π΅ΠΌΡƒ <MenuItem> ΠΏΠΎΡ‡Ρ‚ΠΈ Π² 10 Ρ€Π°Π· ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅, Ρ‡Π΅ΠΌ <li> ).
  • Π’Π°ΡˆΠ° дСмонстрация с makeStyles создаСт Π΅Π΄ΠΈΠ½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй, Π° Emotion / sc - Π½Π΅Ρ‚. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй с сСлСкторами CSS для нацСливания Π½Π° элСмСнты Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ. Или сдСлайтС Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚, Ρ€Π°Π·Π±ΠΈΠ² ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй makeStyles Π½Π° нСсколько, ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ Π½Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт.

Π”Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, @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';

Capture d’écran 2020-09-23 aΜ€ 17 23 23
Capture d’écran 2020-09-23 aΜ€ 17 25 07
Capture d’écran 2020-09-23 aΜ€ 17 23 54

На Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΎΠ½ ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅. Π£Π·ΠΊΠΎΠ΅ мСсто ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ Π² стилях. И ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ я запустил Π΅Π³ΠΎ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ⚠️!

Π― Π΄ΠΎΠ±Π°Π²ΠΈΠ» Π΄Π²Π΅ Π½ΠΎΠ²Ρ‹Π΅ страницы, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ вСрсия слайдСра с эмоциями WIP:

ПослС создания для производствСнной срСды статистика ΠΏΠΎΡ…ΠΎΠΆΠ° Π½Π° https://github.com/mui-org/material-ui/issues/22342#issuecomment -697540546, это ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Π² 1,6 Ρ€Π°Π·Π° ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅ (Π½ΠΎ CSS ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ динамичСский). ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΈΠ³Ρ€Π°Ρ‚ΡŒ с вСрсиСй эмоций WIP с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ:

Capture d’écran 2020-09-23 aΜ€ 18 56 01

Capture d’écran 2020-09-23 aΜ€ 18 55 48

Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ JSS x1.1 быстрСС, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ makeStyles вмСсто withStyles: # 15023.

@oliviertassinari Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ prod всС становится Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ быстрСС, Π½ΠΎ я Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ различия ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΠΎ Ρ€Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Π½ΠΈΡŽ> Vercel Π² пСсочницС ΠΊΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ быстро Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ с Ρ„Π»Π°Π³Π°ΠΌΠΈ производствСнной сборки.

Глядя Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ makeStyles , я Π²ΠΈΠΆΡƒ, насколько это быстрСС, Ссли Π²Ρ‹ просто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ статичСскиС стили :

  1. ΠŸΡ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΌΠΎΠ½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ вызываСтся attach .
  2. Если это ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ экзСмпляр этого Ρ‚ΠΈΠΏΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, вызываСтся stylesCreator.create , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ fn ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Π² makeStyles(fn) .
  3. Π’ΠΎ всСх ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… случаях stylesCreator.create пропускаСтся, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ счСтчик ссылок> 0.

Для ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ€Π΅Π½Π΄Π΅Ρ€ΠΎΠ²:

  1. ΠŸΡ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠΌ Ρ€Π΅Π½Π΄Π΅Ρ€Π΅ вызываСтся attach .
  2. ПослС этого stylesCreator.create пропускаСтся, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ счСтчик ссылок> 0, поэтому никакая Ρ€Π°Π±ΠΎΡ‚Π° Π½Π΅ выполняСтся.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ссли ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ динамичСскиС стили, Ρ‚ΠΎ листы Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒΡΡ здСсь ΠΏΡ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΌΠΎΠ½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠΌ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π΅.

Напротив, styled-components ΠΈ emotion ΠΏΠΎΡ…ΠΎΠΆΠ΅, Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ наши Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ стилизации для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ экзСмпляра ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΡŽ Ρ†ΠΈΠΊΠ»ΠΎΠ² процСссора ΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌΡƒ давлСнию памяти. Π― Π΄ΡƒΠΌΠ°Π», Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΊΠ°ΠΊΠΈΠΌ-Ρ‚ΠΎ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ кСш-ΠΏΠ°ΠΌΡΡ‚ΡŒ с нСсколькими запоминаниями Π½Π° основС ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ свойств, Π½ΠΎ это ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π»ΠΎ, Ρ‡Ρ‚ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ стилСй чистыС, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ Ρ‚Π°ΠΊ, ΡƒΡ‡Ρ‚ΠΈΡ‚Π΅:

     const someContext = useContext(FooContext);

    return <div css={ { paddingTop: someContext.padding(1) } }>;

Если ΠΌΠΎΠΈ прСдполоТСния Π²Π΅Ρ€Π½Ρ‹, Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ слоТно Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ уровня ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ makeStyles для Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ статичСских стилСй, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ способ Π΅Π³ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ API ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ styled ΠΈΠ»ΠΈ css API Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚.

Π― Π²ΠΈΠΆΡƒ нСсколько Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ:

  • Π’ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌ описании ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ ΠΌΡ‹ ΠΎΡ†Π΅Π½ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ динамичСской ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ΅ Material-UI. ΠœΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ запись для статичСского случая (Ρ‡Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ v4). Π£ нас Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ случай для react-jss static ΠΈ dynamic. Π­Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π½Π°ΠΌ ΠΏΠΎΠ½ΡΡ‚ΡŒ объСм доступных ΠΎΠΏΡ†ΠΈΠΉ Π΄Π²ΠΈΠΆΠΊΠ° стилСй.
  • ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²Ρ‹ΡΡΠ½ΠΈΡ‚ΡŒ, Π³Π΄Π΅ находится ΡƒΠ·ΠΊΠΎΠ΅ мСсто. ΠœΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ сСбС Π°Π΄Π°ΠΏΡ‚Π΅Ρ€ для jss, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для styled-components, ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡΡ Π»ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ. Π‘ динамичСской вСрсиСй JSS Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Ρ…ΡƒΠΆΠ΅, Π½ΠΎ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΡΡ€Π°Π²Π½ΠΈΡ‚ΡŒ Π΅Π΅ со статичСской вСрсиСй. ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, это исходит ΠΎΡ‚ Π½Π΅ стилизованной абстракции.
  • ΠœΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π·Π°ΠΌΠ΅Π΄Π»Π΅Π½ΠΈΠ΅ Ρ†Π΅Π½ΠΎΠΉ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ стоит ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π½Π° Ρ€Π°Π·Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΡƒ динамичСских ΠΈ нСстилизованных стилСй. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ список, Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΈΠ»ΠΈ ΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π½Π° Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ сСлСкторы CSS.
    Π­ΠΌΠΎΡ†ΠΈΠΈ ΠΈ стилизованныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΊΠ°ΠΊ ΠΈ React, Π΄ΠΎΠΊΠ°Π·Π°Π»ΠΈ свою Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ ΠΈ Π²Ρ‹ΡΠΎΠΊΡƒΡŽ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ.

Если ΠΊΠ°ΠΊΠΈΠΌ-Ρ‚ΠΎ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ 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 .
  • Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ CSS Π² Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ… JS, ΠΈΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ…ΡƒΠΊ useCss ΠΈΠ»ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ. Π’ ΠΈΠ΄Π΅Π°Π»Π΅ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ псСвдонимы webpack / babel для ΠΈΡ… ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ, ΠΊΠ°ΠΊ styled .

ΠœΡ‹ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π½Π° страницС 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…

Π˜Π·Π²ΠΈΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ побСспокоил вас здСсь Ρ‚Π°ΠΊ ΠΏΠΎΠ·Π΄Π½ΠΎ Π² обсуТдСнии, Π½ΠΎ я Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡƒΠ΄ΠΈΠ²Π»Π΅Π½, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ смотритС Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π° styled-jsx

Π˜Ρ… список Π² точности соотвСтствовал вашим трСбованиям:

  • Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ сСрвСр ΠΈ ΠΊΠ»ΠΈΠ΅Π½Ρ‚
  • Полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° CSS, Π½ΠΈΠΊΠ°ΠΊΠΈΡ… компромиссов Π² мощности
  • Π Π°Π·ΠΌΠ΅Ρ€ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ выполнСния всСго 3 ΠšΠ‘ (Π² сТатом Π²ΠΈΠ΄Π΅, ΠΎΡ‚ 12 ΠšΠ‘)
  • Полная изоляция: сСлСкторы, анимация, ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹
  • ВстроСнный прСфикс поставщика CSS
  • ΠžΡ‡Π΅Π½ΡŒ быстрая, минимальная ΠΈ эффСктивная транспиляция (см. НиТС)
  • Π’Ρ‹ΡΠΎΠΊΠΎΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ CSS-ΠΈΠ½ΡŠΠ΅ΠΊΡ†ΠΈΡ Π²ΠΎ врСмя выполнСния Π±Π΅Π· сСрвСрного Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°
  • ΠžΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΡ Π½Π° Π±ΡƒΠ΄ΡƒΡ‰Π΅Π΅: эквивалСнт Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° Π½Π° сСрвСрС "Shadow CSS"
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° исходных ΠΊΠ°Ρ€Ρ‚
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° динамичСских стилСй ΠΈ Ρ‚Π΅ΠΌ
  • ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° CSS Ρ‡Π΅Ρ€Π΅Π· ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹

Π― Π±Ρ‹ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΠ» Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ это ΠΏΠΎΡ‡Ρ‚ΠΈ стандартный 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:

  1. Π“Ρ€Π°Π½ΡŒ ΠΏΡ€ΠΎΡ‚ΠΈΠ² Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Ρ… сСлСкторов CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΎΡΠ°Ρ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌΠΈ элСмСнтами: Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, In .css-e7ylz8 .MuiTreeItem-group . Π£ вас Π½Π΅Ρ‚ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΠΉ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π½Π΅ примСняСт ΡΡ‚ΠΈΠ»ΡŒ ΠΊ Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅ΠΌΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ (Π½Π΅ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΡ‹ΠΉ эффСкт, ΡΡŽΡ€ΠΏΡ€ΠΈΠ·!). Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, для Π½Π°ΡˆΠΈΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² всС Π² порядкС, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ остороТны.
  2. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΏΠΎΡ€Ρ‚Π°Π»ΠΎΠ² Π»Π΅Π³ΠΊΠΎΠΉ Π·Π°Π΄Π°Ρ‡Π΅ΠΉ: https://material-ui.com/guides/interoperability/#portals. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ popper, Π° Π½Π΅ ΠΊΠΎΡ€Π΅Π½ΡŒ, ΠΊΠ°ΠΊ ΠΌΡ‹ сдСлали с ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠΌ.
  3. Бинтаксис $styleRule ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π°Π΅Ρ‚, Ссли ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ стиля Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ.
  4. Π Π°Π·Ρ€Π΅ΡˆΠΈΡ‚ΡŒ настройку ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… ΠΈΠΌΠ΅Π½ классов. Π’Π΅ΠΊΡƒΡ‰Π΅Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ - ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠΏΠΎΡ€Ρƒ 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 ?). Π£ нас Π΅ΡΡ‚ΡŒ ряд ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ², Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ:

  • Π€Π°ΠΉΠ»Ρ‹ Vanilla CSS
  • SCSS
  • JSS

Π² зависимости ΠΎΡ‚ потрСбностСй ΠΈ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠΉ этих ΠΊΠΎΠΌΠ°Π½Π΄.

Экспорт ΠΈΠΌΠ΅Π½ классов ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚, Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ Π²ΠΈΠ΄ 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% большС усилий (ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅). ΠΠ»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Π°Ρ ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ высока. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ„Π»Π°Ρ‚Ρ‚Π΅Ρ€, ΠΏΠΎΡ…ΠΎΠΆΠ΅ , Π·Π°Ρ…Π²Π°Ρ‚ΠΈΠ» Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠΈ, которая Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π° Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ†Π΅Π»ΠΈ.

Π― Π½Π΅ Ρ…ΠΎΡ‡Ρƒ Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ нас слишком Π΄Π°Π»Π΅ΠΊΠΎ, Π½ΠΎ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΠ· этих Π΄ΠΎΠ²ΠΎΠ΄ΠΎΠ².

  • РаньшС ΠΏΡ€ΠΈ создании ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ RN ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· самых слоТных Π·Π°Π΄Π°Ρ‡ Π±Ρ‹Π»ΠΎ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. На самом Π΄Π΅Π»Π΅ это Π±Ρ‹Π»Π° достаточно большая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, стоит Π»ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π― ΡΠ»Ρ‹ΡˆΠ°Π», Ρ‡Ρ‚ΠΎ с ΠΎΠ΄Π½ΠΎΠΉ ΠΌΠ½ΠΎΠ³ΠΎΠΎΠ±Π΅Ρ‰Π°ΡŽΡ‰Π΅ΠΉ Π½ΠΎΠ²ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅. Но я сомнСваюсь, Ρ‡Ρ‚ΠΎ это Π±Ρ‹Π»ΠΎ Π±Ρ‹ Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎΠΎΠ±Π΅Ρ‰Π°ΡŽΡ‰Π΅, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ MUI Π±Ρ‹Π» Π² миксС. ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ я, Π½ΠΎ я ΠΌΠΎΠ³ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ кроссплатформСнный MUI Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ использованиС RN. Π― знаю, Ρ‡Ρ‚ΠΎ это лишь малая Ρ‡Π°ΡΡ‚ΡŒ использования react-dom, Π½ΠΎ Π²Π΅Π± ΠΎΠ³Ρ€ΠΎΠΌΠ΅Π½, ΠΈ react-dom Π΄ΠΎΠΌΠΈΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ Π² соврСмСнных Π²Π΅Π±-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°Ρ… . Π”Π°ΠΆΠ΅ Ссли Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€ΠΎΠ΄Π½ΠΎΠΉ использованиС являСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ нСбольшим, Ρ‡Ρ‚ΠΎ всС Π΅Ρ‰Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ число людСй , ΠΊΠ°ΠΊ Π°Π±ΡΠΎΠ»ΡŽΡ‚ , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ. ΠžΠΏΡ€ΠΎΡ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ MUI, вСроятно, Π±Ρ‹Π» Π±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ΠΉ ΠΌΠ΅Ρ‚Ρ€ΠΈΠΊΠΎΠΉ, Ρ‡Π΅ΠΌ статистика npm.
  • Π― знаю, Ρ‡Ρ‚ΠΎ Π½Π΅ Π² курсС, Π½ΠΎ я Π½Π΅ совсСм Π²Π΅Ρ€ΡŽ, Ρ‡Ρ‚ΠΎ Flutter Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ React Native. Π­Ρ‚ΠΎ сравнСниС Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ° Π½Π° самом Π΄Π΅Π»Π΅ Π½Π΅ Π»ΡƒΡ‡ΡˆΠΈΠΉ способ сравнСния. На Π½Π΅Π³ΠΎ влияСт Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅ΡˆΠ°ΡŽΡ‰ΠΈΡ… Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² (Flutter Π½ΠΎΠ²Π΅Π΅, поэтому большС людСй ΡƒΠΆΠ΅ Π·Π½Π°ΡŽΡ‚ RN ΠΈ ΠΈΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡΡΡ‹Π»Π°Ρ‚ΡŒΡΡ Π½Π° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ; докумСнтация Flutter ΠΌΠΎΠ³Π»Π° Π±Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ, ΡΡΡ‹Π»Π°ΡΡΡŒ Π½Π° ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ Π΅Π³ΠΎ Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ°; НСкоторыС ΠΈΠ· Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ° чтСния Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² RN Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠ΄Ρ‚ΠΈ Π½Π° Экспо). Π­Ρ‚ΠΎ нСсколько ΠΎΡˆΠΈΠ±ΠΎΡ‡Π½ΠΎΠ΅ сравнСниС Google Trends - ΠΏΠΎΡ‡Ρ‚ΠΈ Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ, ΠΈ ΠΎΠ½ довольно Ρ€ΠΎΠ²Π½Ρ‹ΠΉ. Π― Π»ΠΈΡ‡Π½ΠΎ знаю, Ρ‡Ρ‚ΠΎ Ρƒ Flutter Π±Ρ‹Π»ΠΎ нСсколько трудностСй, ΠΈ RN ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ выглядит Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ пСрспСктивным, Ссли Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π°Π· ΠΊΠ»ΠΈΠ΅Π½Ρ‚ скаТСт, Ρ‡Ρ‚ΠΎ Π΅ΠΌΡƒ Π½ΡƒΠΆΠ½ΠΎ мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.
  • JSS Π±Ρ‹Π» ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· самых Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ (Π½Π° самом Π΄Π΅Π»Π΅, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, самой большой), ΠΊΠΎΠ³Π΄Π° MUI Ρ€Π°Π±ΠΎΡ‚Π°Π» с React Native. Π― знаю, Ρ‡Ρ‚ΠΎ всС Π΅Ρ‰Π΅ Π±ΡƒΠ΄Π΅Ρ‚ нСсколько ΠΎΡΠ»ΠΎΠΆΠ½ΡΡŽΡ‰ΠΈΡ… Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ², Π½ΠΎ ИМΠ₯О, ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Π½Π° эмоции, вСроятно, устранило 2/3 трудностСй, связанных с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ MUI Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² RN, ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½ΠΎ.

ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Π½Π° эмоции, вСроятно, устранило 2/3 трудностСй, связанных с Ρ€Π°Π±ΠΎΡ‚ΠΎΠΉ MUI Π² RN.

ΠœΡ‹ с Π½Π΅Ρ‚Π΅Ρ€ΠΏΠ΅Π½ΠΈΠ΅ΠΌ ΠΆΠ΄Π΅ΠΌ вашСго POC πŸ˜„

ΠœΡ‹ с Π½Π΅Ρ‚Π΅Ρ€ΠΏΠ΅Π½ΠΈΠ΅ΠΌ ΠΆΠ΄Π΅ΠΌ вашСго POC πŸ˜„

Π― Π±Ρ‹ с ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅ΠΌ поигрался с Π½ΠΈΠΌ, Ссли Ρƒ мСня Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ. Но люди ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π½Π΅ ΡƒΡ‚Ρ€ΡƒΠΆΠ΄Π°ΡŽΡ‚ сСбя созданиСм POC для Π²Π΅Ρ‰Π΅ΠΉ, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠΆΠ΄Π°ΡŽΡ‰ΠΈΠ΅ Π½Π΅ ΠΏΡ€ΠΎΡΠ²Π»ΡΡŽΡ‚ интСрСса. НСт смысла Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π½Ρ‹Π½Π΅ΡˆΠ½ΡΡ атмосфСра Ρ‚Π°ΠΊΠΎΠ²Π°, Ρ‡Ρ‚ΠΎ это, вСроятно, Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ просто забросят. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ я Ρ…ΠΎΡ‡Ρƒ ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ отклонСния цСнности RN ΠΈΠ»ΠΈ цСнности RN ΠΊΠ°ΠΊ возмоТности для Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ.

Π”Π²Π° вопроса:

  1. ΠœΠΎΠΆΠ΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для ΡƒΠΊΠ»Π°Π΄ΠΊΠΈ Π±Π΅Π· HOC? МнС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, нравится API-интСрфСйс React hook, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π² настоящСС врСмя Π΅ΡΡ‚ΡŒ Π² MUI ... Π½Π΅ ΡƒΠ²Π΅Ρ€Π΅Π½, являСтся Π»ΠΈ стилизованный синтаксис Ρ‚Π°ΠΊΠΆΠ΅ HOC ΠΏΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡ‚ΠΎΠΌ, Π½ΠΎ это ΠΏΡ€Π΅Π²Π·ΠΎΠΉΠ΄Π΅Ρ‚ усилия (ΠΏΠΎΡ‡Ρ‚ΠΈ Π²Π΅Π·Π΄Π΅ Π² Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°Ρ… React) ΠΏΡ€ΠΈ ΡƒΡ…ΠΎΠ΄Π΅ ΠΎΡ‚ HOC.
  2. Π‘ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² 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 πŸ˜„.

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ