Skip to content

Instantly share code, notes, and snippets.

@rgdelato
Last active Jan 16, 2017
Embed
What would you like to do?
Styled Components
import React, { Component } from 'react';
import logo from './logo.svg';
import styled, { keyframes } from 'styled-components';
const AppContainer = styled('div')`
text-align: center;
.app-header {
background-color: ${props => props.color};
height: 150px;
padding: 20px;
color: white;
}
.app-logo {
height: 80px;
animation: ${keyframes`
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
`} infinite 20s linear;
}
.app-intro {
font-size: large;
}
`;
class App extends Component {
static defaultProps = {
color: '#222'
};
render() {
return (
<AppContainer color={this.props.color}>
<div className="app-header">
<img className="app-logo" src={logo} alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="app-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</AppContainer>
);
}
}
export default App;
/*
Generates:
<style type="text/css">
@keyframes iVXCSc {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hoTfqm {
text-align: center;
}
.hoTfqm .app-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.hoTfqm .app-logo {
height: 80px;
animation: iVXCSc infinite 20s linear;
-webkit-animation: iVXCSc infinite 20s linear;
}
.hoTfqm .app-intro {
font-size: large;
}
</style>
*/
/* **************************************************************** */
import React, { Component } from 'react';
import logo from './logo.svg';
import styled, { keyframes } from 'styled-components';
const AppContainer = styled.div`
text-align: center;
`;
const AppHeader = styled.div`
background-color: ${props => props.color};
height: 150px;
padding: 20px;
color: white;
`;
const AppLogo = styled.img`
height: 80px;
animation: ${keyframes`
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
`} infinite 20s linear;
`;
const AppIntro = styled.p`
font-size: large;
`;
class App extends Component {
static defaultProps = {
color: '#222'
};
render() {
return (
<AppContainer>
<AppHeader color={this.props.color}>
<AppLogo src={logo} alt="logo" />
<h2>Welcome to React</h2>
</AppHeader>
<AppIntro>
To get started, edit <code>src/App.js</code> and save to reload.
</AppIntro>
</AppContainer>
);
}
}
export default App;
/*
Generates:
<style type="text/css">
.jBvxsI {
text-align: center;
}
.eBOorU {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
@keyframes iVXCSc {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.ksibDt {
height: 80px;
animation: iVXCSc infinite 20s linear;
-webkit-animation: iVXCSc infinite 20s linear;
}
.etOaTz {
font-size: large;
}
</style>
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment