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
370
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
310
Introduction to React.js
mxstbr
1
140
Styling React Applications
mxstbr
2
590
Scaling React.js Applications (short version)
mxstbr
2
390
Scaling React.js Applications
mxstbr
0
390
Offline is the new Black
mxstbr
3
990
Exploring ES6
mxstbr
1
310
Testing React.js Applications
mxstbr
4
570
Other Decks in Technology
See All in Technology
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
現場で役立つAPIデザイン
nagix
29
10k
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Being A Developer After 40
akosma
89
590k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
How to Ace a Technical Interview
jacobian
276
23k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Bash Introduction
62gerente
610
210k
Designing for humans not robots
tammielis
250
25k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
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