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
330
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
250
Introduction to React.js
mxstbr
1
130
Styling React Applications
mxstbr
2
460
Scaling React.js Applications (short version)
mxstbr
2
350
Scaling React.js Applications
mxstbr
0
370
Offline is the new Black
mxstbr
3
880
Exploring ES6
mxstbr
1
300
Testing React.js Applications
mxstbr
4
450
Other Decks in Technology
See All in Technology
Cracking the KubeCon CfP
inductor
2
270
How to Lead? Testimonial of a Lead Android Engineer
oleur
1
120
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
430
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
170
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
1
710
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
6
1.3k
令和最新版 Ruby プロファイラ "Pf2" のご紹介
osyoyu
0
160
Introduction to SwiftUI V2
pohjus
0
100
データベース03: 関係データモデル
trycycle
0
110
成長をサポートするピープルマネジメントのやり方
sioncojp
9
1.4k
[2024/04/23]tbls活用事例 〜 ビューポイントから データベースを整理してみた話 〜
tosite
0
110
MixIT 2024 - Pulumi : Gérer son infra avec son langage de programmation préféré
ju_hnny5
1
120
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
75
5.2k
We Have a Design System, Now What?
morganepeng
43
6.8k
Scaling GitHub
holman
457
140k
Fireside Chat
paigeccino
22
2.6k
The Language of Interfaces
destraynor
151
23k
Building Your Own Lightsaber
phodgson
100
5.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
Writing Fast Ruby
sferik
622
60k
Statistics for Hackers
jakevdp
790
220k
Thoughts on Productivity
jonyablonski
60
3.9k
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
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