Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Styling Intro
Search
Max Stoiber
February 28, 2017
Technology
3
350
Styling Intro
React in Flip Flops satyling talk
Max Stoiber
February 28, 2017
Tweet
Share
More Decks by Max Stoiber
See All by Max Stoiber
Testing React Applications
mxstbr
3
270
Introduction to React.js
mxstbr
1
140
Styling React Applications
mxstbr
2
500
Scaling React.js Applications (short version)
mxstbr
2
360
Scaling React.js Applications
mxstbr
0
380
Offline is the new Black
mxstbr
3
910
Exploring ES6
mxstbr
1
310
Testing React.js Applications
mxstbr
4
480
Other Decks in Technology
See All in Technology
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
120
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
620
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
740
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
150
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
How to Think Like a Performance Engineer
csswizardry
4
590
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
470
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Git: the NoSQL Database
bkeepers
PRO
423
64k
How STYLIGHT went responsive
nonsquared
93
5k
A designer walks into a library…
pauljervisheath
201
24k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Designing the Hi-DPI Web
ddemaree
276
34k
What's new in Ruby 2.0
geeforr
338
31k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Faster Mobile Websites
deanohume
303
30k
Transcript
Styling React Applications Max Stoiber @mxstbr Open Source Developer, Thinkmill
Let’s talk about styling
The Checklist
No build requirements Small and lightweight Supports global CSS Supports
entirety of CSS Colocated Isolated Easy to override Theming Server side rendering No wrapper components
There is no ✅✅✅ solution
Every app is different
The Example
fake.twitter.com
fake.twitter.com
fake.twitter.com <Tweet> <App>
fake.twitter.com <Tweet> <Header> <Content> <Footer>
1. CSS 2. Inline Styles 3. CSS Modules 4. styled-components
The Methods
1. CSS 2. Inline Styles 3. CSS Modules 4. styled-components
The Methods
html { color: #292f33; font-family: Helvetica, Arial, sans-serif; font-size: 14px;
line-height: 1.3125; } .container { margin: 0 auto; width: 100%; } @media screen and (min-width: 360px) { html { font-size: 15px; } .container { max-width: 400px; } }
.tweet__content { font-size: 1.25rem; font-weight: 300; line-height: 1.5em; margin: 0;
padding: .65625rem 0 .98438rem; } .tweet__content a { color: #1da1f2; } .tweet__content a:hover { text-decoration: underline; }
const Content = ({ text, media }) => ( <div>
<p className=“tweet__content" dangerouslySetInnerHTML={{ __html: text }} /> <a className=“tweet__media" target=“_blank" href={media.expanded_url} > <img className=“tweet__image" src={media.media_url_https} alt=“" /> </a> </div> );
No build requirements Small and lightweight Supports global CSS Supports
entirety of CSS Colocated Isolated Easy to override Theming Server side rendering No wrapper components ✅ ✅ ✅ ✅ ❌ ❌ ✅ (Custom Properties) ✅ ✅
1. CSS 2. Inline Styles 3. CSS Modules 4. styled-components
The Methods
const styles = { container: { margin: '0 auto', width:
'100%' } }
const styles = { content: { fontSize: '1.25rem', fontWeight: '300',
lineHeight: '1.5em', margin: 0, padding: '.65625rem 0 .98438rem' } }
const Content = ({ text, media }) => ( <div>
<p style={styles.content} dangerouslySetInnerHTML={{ __html: text }} /> <a style={styles.media} target=“_blank" href={media.expanded_url} > <img style={styles.image} src={media.media_url_https} alt=“" /> </a> </div> );
<p style="font-size: 1.25rem; font-weight: 300; line-height: 1.5em; margin: 0; padding:
.65625rem 0 .98438rem" />
No build requirements Small and lightweight Supports global CSS Supports
entirety of CSS Colocated Isolated Easy to override Theming Server side rendering No wrapper components ✅ ✅ ❌ ❌ ✅ ✅ ❌ ❌ ✅ ✅
1. CSS 2. Inline Styles 3. CSS Modules 4. styled-components
The Methods
html { color: #292f33; font-family: Helvetica, Arial, sans-serif; font-size: 14px;
line-height: 1.3125; } .container { margin: 0 auto; width: 100%; } @media screen and (min-width: 360px) { html { font-size: 15px; } .container { max-width: 400px; } }
.content { font-size: 1.25rem; font-weight: 300; line-height: 1.5em; margin: 0;
padding: .65625rem 0 .98438rem; } .content a { color: #1da1f2; } .content a:hover { text-decoration: underline; }
import styles from './content.css'; const Content = ({ text, media
}) => ( <div> <p className={styles.content} dangerouslySetInnerHTML={{ __html: text }} /> <a className={styles.media} target=“_blank" href={media.expanded_url} > <img className={styles.image} src={media.media_url_https} alt=“" /> </a> </div> );
/* content.css */ .content { /* … */ } .content__content__a452s
{ /* … */ } /* home.css */ .content { /* … */ } .home__content__juz65 { /* … */ }
No build requirements Small and lightweight Supports global CSS Supports
entirety of CSS Colocated Isolated Easy to override Theming Server side rendering No wrapper components ❌ (requires webpack) ✅ ✅ ✅ (has to be separate file) ✅ ✅ ❌ ✅ ✅
If you’re writing React, you have access to a more
powerful styling construct than CSS class names. You have components.” – Michael Chan, @chantastic “
1. CSS 2. Inline Styles 3. CSS Modules 4. styled-components
The Methods
const styles = { color: '#000', }; Inline styles vs.
CSS-in-JS // Inline styles: <p style={styles} /> // CSS-in-JS (requires lib): <p className={styles} />
import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em;
text-align: center; color: palevioletred; `; const Wrapper = styled.section` color: palevioletred; padding: 4em; width: 100%; height: 100%; background: papayawhip; `;
import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em;
text-align: center; color: palevioletred; `; const Wrapper = styled.section` color: palevioletred; padding: 4em; width: 100%; height: 100%; background: papayawhip; `;
import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em;
text-align: center; color: palevioletred; `; const Wrapper = styled.section` color: palevioletred; padding: 4em; width: 100%; height: 100%; background: papayawhip; `; styled.h1
import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em;
text-align: center; color: palevioletred; `; const Wrapper = styled.section` color: palevioletred; padding: 4em; width: 100%; height: 100%; background: papayawhip; `;
import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em;
text-align: center; color: palevioletred; `; const Wrapper = styled.section` color: palevioletred; padding: 4em; width: 100%; height: 100%; background: papayawhip; `;
const App = () => ( <Wrapper> <Title> Hello World,
this is my first styled component! </Title> </Wrapper> ); ReactDOM.render( <App />, document.getElementById(‘#app') );
styled-components
Adapting based on props
<Button>Normal</Button> <Button primary>Primary</Button>
const Button = styled.button` /* Adapt the colors based on
primary prop */ background: ${(props) => props.primary ? 'palevioletred' : 'white' }; color: ${(props) => props.primary ? 'white' : 'palevioletred' }; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; export default Button;
<Button>Normal</Button> <Button primary>Primary</Button>
styled-components
Theming Built In
import { ThemeProvider } from 'styled-components'; const theme = {
primary: 'palevioletred', }; const App = () => ( <ThemeProvider theme={theme}> <Root /> </ThemeProvider> );
import { ThemeProvider } from 'styled-components'; const theme = {
primary: 'palevioletred', }; const App = () => ( <ThemeProvider theme={theme}> <Root /> </ThemeProvider> );
import { ThemeProvider } from 'styled-components'; const theme = {
primary: 'palevioletred', }; const App = () => ( <ThemeProvider theme={theme}> <Root /> </ThemeProvider> );
import styled from 'styled-components'; const Button = styled.button` /* Adjust
background based on the theme */ background: ${props => props.theme.primary}; color: white; `;
styled-components
const redTheme = { primary: 'palevioletred', }; const greenTheme =
{ primary: 'mediumseagreen', }; // … <ThemeProvider theme={redTheme}> <Button>I'm red!</Button> </ThemeProvider> <ThemeProvider theme={greenTheme}> <Button>I'm green!</Button> </ThemeProvider>
styled-components
<ThemeProvider theme={redTheme}> <Button>I'm red!</Button> </ThemeProvider>
<ThemeProvider theme={redTheme}> <div> <Button>I'm still red!</Button> </div> </ThemeProvider>
<ThemeProvider theme={redTheme}> <div> <Container> <Button>I'm still red!</Button> </Container> </div> </ThemeProvider>
<ThemeProvider theme={redTheme}> <div> <Container> <div> <Button>I'm still red!</Button> </div> </Container>
</div> </ThemeProvider>
<ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Button>I'm still red!</Button> </SidebarContainer>
</div> </Container> </div> </ThemeProvider>
<ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <Button>I'm still red!</Button>
</Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
<ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <SidebarItem> <Button>I'm still
red!</Button> </SidebarItem> </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
<ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <SidebarItem> <div> <Button>I'm
still red!</Button> </div> </SidebarItem> </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
<ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <SidebarItem> <div> <span>
<Button>I'm still red!</Button> </span> </div> </SidebarItem> </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
Full ReactNative Support
import styled from 'styled-components/native'; const Wrapper = styled.View` background-color: papayawhip;
flex: 1; justify-content: center; align-items: center; `; const Title = styled.Text` font-size: 20; text-align: center; margin: 10; color: palevioletred; font-weight: bold; `;
import styled from 'styled-components/native'; const Wrapper = styled.View` background-color: papayawhip;
flex: 1; justify-content: center; align-items: center; `; const Title = styled.Text` font-size: 20; text-align: center; margin: 10; color: palevioletred; font-weight: bold; `;
import styled from 'styled-components/native'; const Wrapper = styled.View` background-color: papayawhip;
flex: 1; justify-content: center; align-items: center; `; const Title = styled.Text` font-size: 20; text-align: center; margin: 10; color: palevioletred; font-weight: bold; `;
import styled from 'styled-components/native'; const Wrapper = styled.View` background-color: papayawhip;
flex: 1; justify-content: center; align-items: center; `; const Title = styled.Text` font-size: 20; text-align: center; margin: 10; color: palevioletred; font-weight: bold; `;
import styled from 'styled-components/native'; const Wrapper = styled.View` background-color: papayawhip;
flex: 1; justify-content: center; align-items: center; `; const Title = styled.Text` font-size: 20; text-align: center; margin: 10; color: palevioletred; font-weight: bold; `;
class StyledComponentsNative extends Component { render() { return ( <Wrapper>
<Title> Hello World, this is my first native styled component! </Title> </Wrapper> ); } }
None
No build requirements Small and lightweight Supports global CSS Supports
entirety of CSS Colocated Isolated Easy to override Theming Server side rendering No wrapper components ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ❌
Get styling! git checkout 4-styling