Developing Apps With Styled-Components
Why do we use it? Is it good enough for production?
At Getty/IO we use and love styled-components. You may ask me, why? Isn’t just another CSS-in-JS lib? Is it really a good idea to write CSS-in-JS? What about CSS reusability with classes? Those are super valid questions and I’ll try to answer them now.
Isn’t styled-components just another CSS-in-JS lib?
Yes it is. And to be fair, CSS-in-JS does look like a bad idea. But the key point of styled-components is React. Styled-components fits perfectly on the React mindset for developing applications because styled-components turns css into presentational components. This is important.
You can use Sass or even pure CSS to develop your applications? For sure. But, lets be honest, the biggest pain point of this approach are classes names and class toggling. To toggle classes you need to manually create a string with and without the classes and pass it to the className prop. This leads to code like this:
<Component className={active ? "component active" : "component"} />Or any other string manipulation method you prefer. But the point stands. This looks terrible. With styled-components, we can adapt the css based on the props of the component. Leading to this:
<Component active />And the css will answer accordingly. Much cleaner.
Reusability
With CSS we can create good classes that can be used many times throughout our application. This is a good practice and keep our code compliant with the DRY principle.
With styled-components, the reusability is about the components. You can create a button, for example, and reuse throughout the application. It doesn’t matter if you have multiple types of button. You can create multiple props that adjust the button as you need.
import styled, { css } from 'styled-components'
import PropTypes from 'prop-types'const Button = styled.button`
background-color: #000000;
color: #FFFFFF;
${props => props.rounded && css`
border-radius: 5px;
`}
${props => props.outline && css`
background-color: transparent;
border: 1px solid #000000;
color: #000000;
`}
`Button.propTypes = {
rounded: PropTypes.bool,
outline: PropTypes.bool
}export default Button
And just like that you have both a default Button with a black background or a outline Button with transparent background and border, both with an optional border-radius. The exactly same idea works both on the web and on React Native.
Ok, you made your point. What else can I do with styled-components?
Glad you asked :)
Themes
Lets imagine the following situation: You have an app that normally displays text on white background. At one section though, the background is dark and your text need to adapt it accordingly. With css we would do something like this:
.darkSection p {
color: #FFFFFF;
}We could do that with styled-components:
const darkSection = styled.div`
p {
color: #FFFFFF;
}
`At least on the web you can, because you can select elements. That wouldn’t work on React Native. And it’s not that good.
On styled-components, there’s a component called ThemeProvider. This component provides an object called theme though props to its children. No matter how deep they are.
So, instead of doing that, we do this:
const P = styled.p`
color: ${props => props.theme.color};
`
P.defaultProps = {
theme: {
color: #000000;
}
}Now, our component by default renders with black text. But, if a theme prop is passed down to it, it’ll change it’s color accordingly.
All we need to do now is to wrap our dark section with a ThemeProvider.
import { ThemeProvider } from 'styled-components'const DarkSection = () => (
<ThemeProvider theme={{ color: '#000000' }}>
/* dark section content */
</ThemeProvider>
)
And every P component on our dark section will render its text white. A bit more elaborate, but also more powerful. This theme object can hold literally anything an object can hold and we can shape our components css accordingly. This makes theming apps really easy.
If you’re interested in theming, you might want to check polished, which is a utils lib that works beautifully with styled-components.
Extending styles
We can also extend styles from another styled component.
Imagine we have a Image component like this one:
const Image = styled.img`
width: ${props => props.width};
height: ${props => props.height};
`
Image.defaultProps = {
width: '100%',
height: 'auto'
}And we want to extend this component for a Logo image with special responsiveness css related only to it:
const Logo = Image.extend`
@media only screen and (max-width: 600px) {
height: ${props => props.height || '47px'};
}
@media only screen and (min-width: 601px) and (max-width: 1024px) {
height: ${props => props.height || '60px'};
}
@media only screen and (min-width: 1025px) {
height: ${props => props.height || '70px'};
}
`We could also setup the source attribute for this one so that we don’t have to type it when using the component like this:
const Logo = Image.extend.attrs({
src: "url(https://www.image.url)"
})`
/* CSS */
`Conclusion
Well, I confess, I’m biased towards styled-components because I truly love this lib. It brought me back to the time when I discovered Sass and how awesome it was to be able to concatenate css and use all the other Sass super powers. Then React came and changed the way we think about applications, thinking in components all the way through, including in CSS. And styled-components fits perfectly on this paradigm.
The final question stands: Is it good enough for production? The answer is a clear yes. This lib makes developing UI components a joy and with a solid support for themes.
Connect
With our expertise across the latest digital solutions, we have what it takes to streamline business processes and add value. Whether you want to convert your ideas into an MVP or build new products or solutions using modern infrastructure, we can help. We’re passionate about developing mobile and web software for companies of all sizes, and we have the right talent to implement digital innovation programs from Start to Scale successfully. We’re here to help you innovate rapidly.
Say hello to us at hello@getty.io
