Styled-components is a way to write CSS - Cascading Style Sheets using JavaScript ES6 for Reactjs and React Native components.
 |
Styled-components homepage |
How to install
npm install --save styled-components
Or including the following script in your html file
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
4 Benefits of using styled-components
These are the benefits that I have realized after starting using styled-components.
1) CSS reuse
You can save a set of CSS as a variable and reuse it. For example, I styled
<a> tag and able to reuse it in a React template or extend the style for a component.
Styling an <a> tag
import { green, themeColor } from ‘./colors';
import styled from 'styled-components';
export const UnderlineA = styled.a`
cursor: pointer;
text-decoration: none;
color: ${themeColor};
span {
position: relative;
display: inline-block;
i {
padding: 0 5px;
}
}
span:after {
position: absolute;
content: "";
height: 2px;
width: 100%;
bottom: -5px;
left: 0;
background: ${green};
// transform-origin: 0%;
transform: scaleX(0);
transition: transform 0.3s ease-out;
}
&:hover {
span:after {
transform: scaleX(1);
transition: transform 0.3s ease-out;
}
i {
color: ${green}
}
}
`;
Using UnderlineA in CSS file of another component to extend the style
export const ContactURL = styled(UnderlineA)`
font-size: 1.3em;
${media.desktop`
font-size: 1.1em;
`}
`;
2)
Simplify reusing of media query
You can have another media variable for min-width as well.
import { css } from 'styled-components';
const sizes = {
phone: 376,
tablet: 768,
desktop: 992,
larger: 1170
};
export const media = Object.keys(sizes).reduce((accumulator, label) => {
const emSize = sizes[label] / 16
accumulator[label] = (...args) => css`
@media (max-width: ${emSize}em) {
${css(...args)}
}
`
return accumulator
}, {})
You can then use it as so
export const SpecialContact = styled(contact)`
color: red
${media.desktop`
color: tomato
`}
`;
export const Container = styled(Div)`
margin-top: 10vh;
padding-left: 60px;
padding-right: 60px;
${media.tablet`
margin-top: 7vh;
padding-left: 20px;
padding-right: 20px;
`},
${media.phone`
margin-top: 7vh;
padding-left: 10px;
padding-right: 10px;
`},
`;
3)You can use component props to toggle CSS
Example 1: using props to toggle CSS
render() {
return (
<NetworkContainer
row
justify={'center'}
align={'center'}
doBounce={this.props.doBounce}
>
{this.renderContactList()}
</NetworkContainer>
);
}
export const NetworkContainer = styled(Flex)`
transition: color .3s;
i {
text-align: center
}
div {
display: inline-block;
padding-left: 7px;
padding-right: 7px;
}
${({doBounce}) => doBounce && css`
div {
animation: ${bounce} 1.4s ease-out 0.7s;
}
`}
`;
Example 2: using props to set CSS value
render() {
return (
<ScrollUpButtonContainer
show={this.props.show? 1 : 0}
translate={this.props.show? '-20%' : '20%'}
onClick={() => this.scrollToTop()}>
<FontAwButton class={'fa fa-angle-double-up'}/>
</ScrollUpButtonContainer>
);
}
export const ScrollUpButtonContainer = styled.div`
opacity: ${({show}) => show || 0};
transform: ${({translate}) => `translateY(${translate})`};
transition: transform 0.5s ease-in-out, opacity 0.5s ease;
`;
height: ${({shrink}) => shrink ? `2.7em` : `3em`};
OR
${({shrink}) => shrink ? css`flex-shrink: ${shrink};`: null}
4) You can
theme your application.
This is taken from their example as I haven't used theming yet.
Define your theme colors
// colors.js
const colors = {
main: '#393276',
dark: '#0D083B',
light: '#837EB1'
}
export default colors
Apply your theme with ThemeProvider
import { ThemeProvider } from 'styled-components';
import colors from './colors' // from Step #1
const App = props =>
<ThemeProvider theme={colors}>
{props.children}
</ThemeProvider>
Create an importable theme object using styled-components-theme
// theme.js
import createTheme from 'styled-components-theme';
import colors from './colors' // from Step #1
const theme = createTheme(...Object.keys(colors))
export default theme
Use the theme colors in your components
import styled from 'styled-components'
import theme from './theme' // from Step #3
const Header = styled.div`
background: ${theme.dark};
color: ${theme.light};
`
const Button = styled.button`
background-image: linear-gradient(${theme.light}, ${theme.light.darken(0.3));
color: ${theme.dark};
padding: 10px;
`
Check out
styled-component documentation.
You can also check out
their tips on how to use styled-components more efficiently.
Thanks for reading!
Jun
Comments
Post a Comment