Style your Components with styled-component!

Style your Components with styled-component!

presented at React.kyoto v0.2.0
https://react-kyoto.connpass.com/event/61986/

14084b6462b19a8512ce5208a76f8925?s=128

fand/amagitakayosi

August 01, 2017
Tweet

Transcript

  1. Style your Co mponents wit h styled-comp onents! ©amagitakayosi

  2. @amagitakayosi

  3. Έͳ͞Μ CSS Ͳ͏ͯ͠·͔͢ʁ

  4. CSS in JS ΍ͬͯ·͔͢ʁ

  5. None
  6. CSS in JS • ίϯϙʔωϯτͷελΠϧΛCSSͰ͸ͳ͘
 JSͷΦϒδΣΫτͱͯ͠هड़͢Δ • είʔϓΛ෼཭Ͱ͖Δʂ • ܧঝͰ͖Δʂ

    (Object.assignͳͲ)
  7. ओͳCSS in JSϥΠϒϥϦ

  8. ओͳCSS in JSϥΠϒϥϦ • Radium • Aphrodite • CSS Modules

  9. FormidableLabs/radium • Reactͷhocͱ࣮ͯ͠૷ • JSΦϒδΣΫτΛstyleଐੑʹಥͬࠐΉ • renderϝιουΛΦʔόʔϥΠυͯ͠
 ྑ͍ײ͡ʹ΍ͬͯ͘ΕΔ

  10. None
  11. FormidableLabs/radium

  12. radiumͷࠔΓͲ͜Ζ • ٙࣅཁૉ࢖͑ͳ͍ (:beforeͱ͔) • keyframeΞχϝʔγϣϯ͕ͪΐͬͱେม • :hover ʹελΠϧ͕͍ͭͯͨΒ
 onMouseOverͰٖࣅతʹ࣮ݱͯͯ͠େม

  13. Khan/aphrodite • ΦϒδΣΫτΛ౉͢ͱɺ<style>ͱରԠ͢Δ
 ҰҙͳΫϥε໊Λੜ੒ͯ͘͠ΕΔ • ٙࣅཁૉʹ΋ରԠ

  14. None
  15. None
  16. AphroditeͷࠔΓͲ͜Ζ • σϑΥϧτͰ !important ͕෇͘ • ελΠϧΛωετͰ͖ͳ͍
 ( .foo .bar

    {} ͱ͔ ) • globalͳελΠϧΛఆٛͰ͖ͳ͍
  17. css-modules/css-modules • Webpackͷcss-loaderΛ࢖ͬͯ
 CSSϑΝΠϧΛJSʹ௚઀ import ͢Δ • ैདྷͲ͓Γͷํ๏Ͱ
 CSS΍SCSSͳͲΛهड़Ͱ͖Δ

  18. +

  19. CSS ModulesͷࠔΓͲ͜Ζ • ׬શʹWebpackґଘ……

  20. zeit/styled-jsx • babelͷϓϥάΠϯͱͯ͠ಈ࡞͢Δ • <style jsx> λά಺ʹελΠϧΛهड़͢Δ

  21. styled-jsxͷࠔΓͲ͜Ζ • ʢݸਓతʹ͸ʣಡΈͮΒ͍…… • ͲͷཁૉʹͲͷελΠϧ͕౰ͨΔͷɺͱ͔ • media queryରԠ͕ඍົ

  22. zeit/styled-jsx • ͦΜͳ

  23. styled-components

  24. styled-components • ελΠϧΛ౰ͯͨίϯϙʔωϯτΛ࡞Γɺ
 ૊Έ߹ΘͤͯϨΠΞ΢τ͢Δɺͱ͍͏ߟ͑ํ • Tagged Template Literal಺ʹ
 CSSจࣈྻΛͦͷ··ॻ͚Δʂ

  25. styled-componentsͷ͕͜͜خ͍͠ • CSSจࣈྻΛͦͷ··ॻ͚Δʂ • ؆୯ʹελΠϧΛܧঝͰ͖Δʂ • propsͰελΠϧΛมߋͰ͖Δʂ • React NativeରԠʂ

  26. CSSจࣈྻΛͦͷ··ॻ͚Δ • Tagged Template Literal಺ʹ
 CSSจࣈྻΛͦͷ··ॻ͘ • ‘:hover' : {

    fontSize: ‘1.6em’ } ͱ͔
 ॻ͔ͣʹࡁΉ
  27. ؆୯ʹελΠϧΛܧঝͰ͖Δ

  28. propsͰελΠϧΛมߋͰ͖Δ • ςʔϚมߋΈ͍ͨͳࣄ΋Ͱ͖ͦ͏

  29. React NativeରԠ • ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͰ
 React NativeͷίϯϙʔωϯτΛ࢖͑Δ • React Nativeͷstyle͸CSSͱͪΐͬͱҧ͏͚Ͳ
 ྑ͍ײ͡ʹॻ͖׵͑ͯ͘ΕΔ

  30. None
  31. γϯλοΫεϋΠϥΠτ Ͳ͏͢Δʁ

  32. γϯλοΫεϋΠϥΠτͲ͏͢Δʁ • Atom: language-babel • VSCode: vscode-styled-components • WebStorm: {

    /*language=CSS*/ }
  33. Atomͷlanguage-babel • styled-componentsʹσϑΥϧτͰରԠ • ଞͷCSS in JSϥΠϒϥϦʹ΋ରԠͰ͖Δʁ
 ʢCSSϒϩοΫ൑ఆ͢Δਖ਼نදݱΛࣗ෼ͰఆٛͰ͖Δʣ

  34. TypeScriptͩͱ……ʁ • atom-typescript ͱ language-babel ͸
 ซ༻Ͱ͖ͳ͍ͬΆ͍ • vscode-styled-components ͸ී௨ʹ࢖͑Δ

    • ૉ௚ʹVSCode࢖͏͔……ʢ◞‸◟ʣ • ͦΕͱ΋ TS΍Ίͯ flow ࢖͏͔
  35. ࣮ࡍʹ࢖ͬͯΈͨײ૝

  36. None
  37. ίϯϙʔωϯτͷཻ౓͕ࣗવͱখ͘͞ͳΔ • ελΠϧΛ౰ͯͨࢠίϯϙʔωϯτΛ
 ͨ͘͞Μఆٛ͢Δ͜ͱʹͳΔ • ଟ͘ͳΔͱࣗવͱϑΝΠϧ෼ׂͨ͘͠ͳΔ • ίϯϙʔωϯτ୯ҐͰߟ͑Δ͜ͱʹͳΔ • มͳந৅ԽΛ͠ʹ͍͘

  38. ΋ͪΖΜ ࡶʹॻ͘͜ͱ΋ग़དྷΔ

  39. $44͕ۤखͳਓʹͦ͜ Φεεϝʂ

  40. styled-components ϑΝϛϦʔ

  41. ؔ࿈ϥΠϒϥϦ͕͍ͭ͘΋͋Δ • polished • css-to-react-native • elm-styled

  42. polished✨ • ศརؔ਺ηοτ • Sass࣌୅Ͱ͍͏compassΈ͍ͨͳ΋Μ

  43. css-to-react-native • CSSΛReactNativeͷstyleʹ౉ͤΔܗʹ
 ม׵ͯ͘͠ΕΔ • styled-componentsͷதͰ࢖ΘΕͯΔ

  44. elm-styled (ະϦϦʔε) • Elm༻ styled-components • ܕͷαϙʔτΛड͚ΒΕΔʂ

  45. ͓·͚: ܕ෇͖CSSγϦʔζ • Typestyle • TypeScriptʹΑΔνΣοΫΛ೦಄ʹஔ͍͍ͯΔ • ScalaCSS • ScalaͰελΠϧΛॻ͍ͯCSSΛग़ྗ͢Δ

    • Scala.js ΍ scalajs-reactͱซ༻͢Δͱ
 Scala͚ͩͰϑϩϯτΤϯυॻ͚Δ
  46. ࢀߟ4DBMBKT 4DBMB$44Ͱ༡Μͩهࣄ IUUQBNBHJUBLBZPTJIBUFOBCMPHDPNFOUSZ

  47. ·ͱΊ: ͜ΜͳਓʹΦεεϝ • CSS͕ۤखͳਓ • React NativeϢʔβʔ • աڈʹ CSS

    in JS ࢼ͚ͨ͠Ͳ
 ੑʹ߹Θͳ͔ͬͨਓ
  48. React΋ReactNative΋ ΨϯΨϯ΍͍ͬͯ͜͏ͥʂʂ ׬