JavaScriptures 3 - Styled Components

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 = () => ( <div> <Title>Hello,
World</Title> </div> ) What do they look like? // Title.js const Title = (props) => { return ( <h1 className="title"> {props.children} </h1> ) } // Title.css h1.title { font: bold 24px sans-serif; color: purple; } Without styled components

What do they look like? // App.js const App =
() => ( <div> <Title>Hello, World</Title> </div> ) // 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 <head> <style> .fyUoxx { font: bold 24px
sans-serif; color: purple; } </style> Where’d the styles actually go? // App.js const App = () => ( <div> <Title>Hello, World</Title> </div> ) at runtime, transforms into // in document <body> <div> <h1 class="fyUoxx"> Hello, World </h1> </div>

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 = () => ( <div> <Button>Cancel</Button> <Button primary>Save</Button> </div> )

• 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

JavaScriptures 3 - Styled Components

JavaScriptures 3 - Styled Components

Artsy Open Source

More Decks by Artsy Open Source

Other Decks in Programming

Featured

Transcript

Styled Components Let style be gathered together unto one place

“styled-components” is a Javascript library • that allows you to

// App.js const App = () => ( <div> <Title>Hello,

What do they look like? // App.js const App =

// in document <head> <style> .fyUoxx { font: bold 24px

It’s just CSS! What’s so great about Styled Components? const

But it’s not just CSS • Vendor prefixing, e.g. -webkit-text-orientation:

const fonts = { sans: "'Avant Garde', sans-serif", serif: "Garamond,

const Button = styled.button` background: ${ (props) => (props.primary ?

const Artists = styled.div` font: ${fonts.sans}; margin: 1em 0; `

• We will refactor the styles in our JavaScriptures app

• Build up your UI from small, declarative visual primitives

• Style third-party libraries • Theming • Server-side rendering /

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/