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
580
Scaling React.js Applications (short version)
mxstbr
2
380
Scaling React.js Applications
mxstbr
0
390
Offline is the new Black
mxstbr
3
980
Exploring ES6
mxstbr
1
310
Testing React.js Applications
mxstbr
4
560
Other Decks in Technology
See All in Technology
SREとしてスタッフエンジニアを目指す / SRE Kaigi 2025
tjun
15
5.7k
TypeScriptでモジュラーモノリスやってみた
diggymo
0
130
サーバーレスで楽しよう!お気軽に始められる3つのポイント / Have fun with Serverless!
_kensh
2
170
ソフトウェアアーキテクトのための意思決定術: Software Architecture and Decision-Making
snoozer05
PRO
17
3.7k
2025-01-24-SRETT11-OpenTofuについてそろそろ調べてみるか
masasuzu
0
180
Platform EngineeringがあればSREはいらない!? 新時代のSREに求められる役割とは
mshibuya
2
3.7k
脅威モデリングをやってみた
ledsue
0
100
2025/1/29 BigData-JAWS 勉強会 #28 (re:Invent 2024 re:Cap)/new-feature-preview-q-in-quicksight-scenarios-tried-and-tested
emiki
0
300
横断SREの立ち上げと、AWSセキュリティへの取り組みの軌跡
rvirus0817
3
4.2k
ココナラのセキュリティ組織の体制・役割・今後目指す世界
coconala_engineer
0
220
Plants vs thieves: Automated Tests in the World of Web Security
leichteckig
0
140
Windows Server 2025 へのアップグレードではまった話
tamaiyutaro
2
250
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
A Tale of Four Properties
chriscoyier
157
23k
GraphQLとの向き合い方2022年版
quramy
44
13k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
370
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
The Language of Interfaces
destraynor
156
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
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