Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Utility-first な CSS-in-JS 〜Tailwind CSS と Chakr...

Utility-first な CSS-in-JS 〜Tailwind CSS と Chakra UI を添えて〜 / Utility-First CSS-in-JS

Mitsuki Ogasahara

August 25, 2021
Tweet

More Decks by Mitsuki Ogasahara

Other Decks in Technology

Transcript

  1. ύλʔϯ3: CSS-in-JS • 1ϑΝΠϧ಺ͰఆٛՄೳ • styled.λά໊Ͱఆٛ • ม਺ຒΊࠐΈ΋Մೳ // Article.tsx

    import styled from '@emotion/styled' import theme from '...' const Title = styled.div({ fontWeight: 'bold', fontSize: 14, color: theme.colors.primary, }) export const Article: React.FC = () => ( <div> <Title>هࣄͷλΠτϧ</Title> {/* ... */} </div> )
  2. CSS ͋Δ͋Δ )5.- $44 <div class="title-wrapper"> <div class="title">هࣄͷλΠτϧ</div> <div class="timestamp">12:23</div>

    </div> .title { font-weight: bold; font-size: 14px; } .title-wrapper { display: flex; } ͪΐͬͱσβΠϯௐ੔͢ΔͨΊͷXSBQQFSര஀ʂ
  3. Chakra UI ͷྫ // Article.tsx import { Box } from

    '@chakra-ui/react' export const Article = (props) => ( <Box {...props}> <Box fontWeight="bold" fontSize={['md', 'lg']} color="gray.300" > هࣄͷλΠτϧ </Box> </Box> ) • ελΠϧΛίϯϙʔωϯτͷpropͰఆٛՄೳ • prop໊΍৭໊ͳͲ͸ܕ҆શͰิ׬͕ޮ͘ • ৭΍αΠζͷςʔϚΛద༻Մೳ • Ϩεϙϯγϒ΋؆୯ʹఆٛ ※ ਌ʹ props Λશ෦౉͢ͱɺࣗલίϯϙʔωϯτ΋ Utility ࢖͑ͯΦεεϝ
  4. ิ଍ 6UJMJUZGSJFOEMZͳ$44JO+4ϥΠϒϥϦ IUUQTUFDIKYQSFTTOFUFOUSZVUJMJUZ fi STUDTTJOKT ˒L ˒L ˒L // Article.tsx

    import { x } from ‘@styled/emotion' export const Article = (props) => ( <x.div {...props}> <x.div fontWeight=“bold" fontSize={{ _: 'md', md: 'lg' }} color=“gray-100" > هࣄͷλΠτϧ </x.div> </x.div> ) // Article.tsx import { Box } from '@chakra-ui/react' export const Article = (props) => ( <Box {...props}> <Box fontWeight="bold" fontSize={['md', 'lg']} color="gray.300" > هࣄͷλΠτϧ </Box> </Box> ) *&࣮࣭ରԠ🙆 *&Ұ෦ରԠ🙆 *&ඇରԠ❌ 6UJMJUZͷΈ 6*ϥΠϒϥϦ 6UJMJUZ 6*ϥΠϒϥϦ 6UJMJUZ // Article.tsx import { Box } from '@material-ui/core' export const Article = (props) => ( <Box {...props}> <Box fontWeight="bold" fontSize={{ xs: 'md', md: 'lg' }} color="text.primary" > هࣄͷλΠτϧ </Box> </Box> )
  5. ༨ஊɿଞͷએݴత UI ϑϨʔϜϫʔΫ @override Widget build(BuildContext context) { return Center(

    child: Text( 'Click me!', style: TextStyle( fontSize: 60.0, fontWeight: FontWeight.bold, ), ), ); } 6UJMJUZ fi STUͳ$44JO+4ͱಉ͡Α͏ͳॻ͖ํ
  6. ·ͱΊ 6UJMJUZ fi STUͳ$44JO+4 Utility- fi rst ͳϝϦοτ ʴ CSS-in-JS

    ͷϝϦοτ ɾ5ZQF4DSJQUͷ࢓૊Έʹ৐ΔͷͰܕ҆શͰɺิ׬͕ޮ͘ ɾม਺ͷຒΊࠐΈͳͲɺ+BWB4DSJQU͕ຒΊࠐΊΔ ɾDMBTT໊ΛఆٛͤͣɺϨεϙϯγϒ΋γϯϓϧʹ࣮ݱ → ੜ࢈ੑߴ͘ίʔυ͕ॻ͚Δ