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
380
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
320
Introduction to React.js
mxstbr
1
150
Styling React Applications
mxstbr
2
630
Scaling React.js Applications (short version)
mxstbr
2
410
Scaling React.js Applications
mxstbr
0
400
Offline is the new Black
mxstbr
3
1k
Exploring ES6
mxstbr
1
320
Testing React.js Applications
mxstbr
4
620
Other Decks in Technology
See All in Technology
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
180
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
120
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.4k
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
310
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.2k
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
110
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
240
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
1k
Witchcraft for Memory
pocke
1
670
Model Mondays S2E03: SLMs & Reasoning
nitya
0
240
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
2
2.3k
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
72
4.9k
Optimizing for Happiness
mojombo
379
70k
Rails Girls Zürich Keynote
gr2m
94
14k
How STYLIGHT went responsive
nonsquared
100
5.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Embracing the Ebb and Flow
colly
86
4.7k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
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