Styled Components Let style be gathered together unto one place JavaScriptures III Roop and Jon 

“styled-components” is a Javascript library ● that allows you to style React UIs ● and utilises the CSS and JS you already know ● while promoting maintainable, component-centric architecture What are Styled Components? 

// App.js const App = () => ( ) What do they look like? // Title.js const Title = (props) => { return (

{props.children}

) } // Title.css h1.title { font: bold 24px sans-serif; color: purple; } Without styled components 

What do they look like? // App.js const App = () => ( ) // Title.js import styled from "styled-components" const Title = styled.h1` font: bold 24px sans-serif; color: purple; ` With styled components function argument(s) 

// in document .fyUoxx { font: bold 24px sans-serif; color: purple; } Where’d the styles actually go? // App.js const App = () => ( ) at runtime, transforms into // in document 

It’s just CSS! What’s so great about Styled Components? const EditionSetHeader = styled.div` display: flex; justify-content: space-between; border-bottom: solid 1px gray; margin-bottom: 15px; padding-bottom: 10px; ` const Description = styled.div` color: #999999; padding-top: 20px; display: none; @media (min-width: 768px) { display: block; } ` 

But it’s not just CSS ● Vendor prefixing, e.g. -webkit-text-orientation: sideways; ● Nested and parent selectors … What’s so great about Styled Components? const ImageLink = styled.a` border: solid 1px gray; &:hover { border-color: purple } img { opacity: 0.5 } ` 

const fonts = { sans: "'Avant Garde', sans-serif", serif: "Garamond, serif", } Also, it’s just Javascript! ● Share named constants and chunks of CSS easily What’s so great about Styled Components? import { fonts } from "shared/stuff" const Name = styled.div` font-family: ${fonts.sans} ` 

const Button = styled.button` background: ${ (props) => (props.primary ? "black" : "lightGray") }; color: ${ (props) => (props.primary ? "white" : "black") }; ` Also, it’s just Javascript! ● Make your component adapt to its props What’s so great about Styled Components? const Tools = () => ( ) 

const Artists = styled.div` font: ${fonts.sans}; margin: 1em 0; ` const Title = styled.div` font: ${fonts.serif}; ` const Button = styled.button` ${(props) => (props.primary && ' background: black')} ` const Artwork = ({ artists, title, forSale }) => ( ) Putting it together 

● We will refactor the styles in our JavaScriptures app ● Visit https://github.com/artsy/javascriptures ● Go into project #4’s README ● Follow along on CodeSandbox.io Let’s code! 

● Build up your UI from small, declarative visual primitives ● Separate presentation from structure at the component level ● Leverage the CSS and JS you already know ● Eliminate conflicts and cruft What we’ve seen 

● Style third-party libraries ● Theming ● Server-side rendering / streaming ● React Native What else can Styled Components do? 

Official Website https://www.styled-components.com/ Tutorial https://hackernoon.com/styled-components-in-action-723852f2a93d About Tagged Template Literals https://mxstbr.blog/2016/11/styled-components-magic-explained/ Future roadmap https://medium.com/styled-components/with-styled-components-into-the-future-d1d917e7c22c Early thoughts on CSS in JS http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html Further reading 

No content