Styled components

Styled Components

иной взгляд на стилизацию React-компонентов

<💅>

Brought to you by © Kirill Novikov

Problems with css

1. Global namespaces
2. Dependencies
3. Dead code Elimination
4. Minification (classnames)
5. Sharing Constants (between css & js)
6. Non-deterministic Resolutions
7. Isolation

*2014 year Christopher Chedeau aka vjeux (React: CSS in JS)

Inline styles 👍

Component.jsx

			const style = {
			  color: 'white',
			  backgroundColor: 'black',
			}
			const Button = () => <button style={style}>Click me!</button>
		

Result

			<button style="color: white; background-color: black;">Click me!</button>
		

Inline styles 💩

1. Pseudo selectors
2. Media queries
3. Vendor prefixes
4. Animations
5. !important to override with CSS
6. Debugging

Radium

			const style = {
			  color: 'white',
			  backgroundColor: 'black',
			  ':hover': {
			    backgroundColor: 'red'
			  },
			  '@media (min-width: 992px)': {
			    padding: '0.6em 1.2em'
			  }
			}

			const Button = () => <button style={style}>Click me!</button>
		

Radium

1. 👍 Pseudo selectors
2. 👍 Media queries
3. 👍 Vendor prefixes
4. 👍 Animations
5. 👎🏿 !important to override with CSS
6. 👎🏿 Debugging

Inline Inline Inline 🔥🔥🔥

1. Radium
2. react-look
3. react-free-style
4. jsxstyle
5. reactCSS
6. ...

CSS Modules

Style.css

			.button {
			  background-color: #white;
			  border-radius: 5px;
			}
		

Component.jsx

			import styles from './index.css'
			const Button = () => (<button className={styles.button}>Click me!</button>)
		

Result

			<button class="_2wpxM3yizfwbWee6k0UlD4">Click me!</button>
		

What next... 🤔

Styled components 💅

			import styled from 'styled-components';
			const Button = styled.button`
			  border-radius: 3px;
			  color: white;
			  &:hover: {
			  	color: red;
			  }
			`
			render(<Button value="Click me!" />)

		

Result

			<style>._2wpxM3yizfwbWee6k0UlD4 { border-radius: 3px; color: white; }</style>
			<button class="_2wpxM3yizfwbWee6k0UlD4">Click me!</button>
		

Styled components inside 🔬

Tagged Template Literals

			const a = 5
			const b = 10
			function tag(strings, ...values) {
				console.log(strings[0]) // "Hello "
				console.log(strings[1]) // " world "
				console.log(values[0])  // 15
				console.log(values[1])  // 50
				return "Bazinga!"
			}
			tag`Hello ${ a + b } world ${ a * b}`
			// "Bazinga!"
		

Styled component === React component

			const Input = styled.input`
				margin: 0.5em;
				color: palevioletred;
			`
			render(
				<div>
					<Input placeholder="Login" type="text" onClick={ onClick } />
					<Input value="@kirill3333" type="text" onClick={ onClick } />
				</div>
			)
		

Style existing components

			const Link = ({ className, children }) => (
				<a className={className}>{children}</a>
			)
			const StyledLink = styled(Link)`
				color: palevioletred;
				font-weight: bold;
			`
			render(
				<div>
					<Link>Unstyled, boring Link</Link>
					<StyledLink>Styled, exciting Link</StyledLink>
				</div>
			)
		

Use properties

			const Button = styled.button`
				background: ${props => props.primary ? 'palevioletred' : 'white'};
				color: ${props => props.primary ? 'white' : 'palevioletred'};
				font-size: 1em;
			'
			render(
				<div>
					<Button>Normal</Button>
					<Button primary>Primary</Button>
				</div>
			)
		

Extend styles

			const Button = styled.button`
				color: palevioletred;
				font-size: 1em;
			'
			const TomatoButton = Button.extend`
				color: tomato;
			'
			render(
				<div>
					<Button>Normal Button</Button>
					<TomatoButton>Tomato Button</TomatoButton>
				</div>
			)
		

Animations

			import styled, { keyframes } from 'styled-components'
			const rotate360 = keyframes`
				from { transform: rotate(0deg); }
				to { transform: rotate(360deg); }
			'
			const Rotate = styled.div`
				animation: ${rotate360} 2s linear infinite;
			'
			render(
				<Rotate>⌛️</Rotate>
			)
		

Also support

1. React Native
2. Theming
3. Server Side Rendering
4. Global variables
5. Additional props
6. TypeScript, Flow

Links

1. React: CSS in your JS by Christopher Chedeau
2. React: CSS in JS techniques comparison
3. What to use for React styling?
4. Styled components documentation
5. CSS Modules (The End of Global CSS)