Introduction To Styled-Components
Getting hands dirty with a small example
It will be easier to understand what styled-components are with a simple example of a button. Let’s start with the installation process. I will use Yarn package manager to do that and I just have to run the command below in my terminal:
yarn add styled-components
Forget about external tools at the moment, just focus on creating the first component. Somewhere in your React code put these simple lines:
import styled from 'styled-components'; const StyledButton = styled.button` background-color: red; `;
To make this component visible on the page you have to use it as a normal React component:
Just make sure you have this part somewhere in your
render() method. And that is all! Incredibly easy to start with if you know CSS. But I will show you something more powerful than CSS!
Imagine that you want to create a half transparent button in case someone doesn’t fill all inputs in a form. Then, you can pass additional properties into a styled component in the same way you pass them in other React components:
const StyledButton = styled.button` background-color: red; opacity: $(props => (props.disabled ? '.5' : '1')); `;
This looks more dynamic. If you pass a disabled
prop, our button will be half transparent:
<StyledButton disabled>Click me!</StyledButton>
props object is always available in the scope of the styled-components function so you don’t have to worry about how to pass it manually. This is a really simple example and sometimes we need to add more styles when the state of our application changes. There is an elegant solution to do that:
const DisabledButton = styled(StyledButton)` background-color: black; color: white; pointer-events: none; opacity: '.5'; `;
This time I wrapped our old StyledButton with a styled function and it returns a new button with some extra styles. In this particular case of using the styled function we can achieve inheritance in our components. Base styles belong to StyledButton and we can override them (or add new) by “extending” this component with
styled() invocation on the StyledButton. Now you can use the new button in your code like this:
<DisabledButton>You cannot click me!<DisabledButton>
What else can I do?
The examples which I presented are really simple, but styled-components has more useful features including:
- Nested rules – if you are familiar with SASS or LESS preprocessor you know how nesting rules can be useful. With styled-components it is possible too
- Vendor prefixing – forget about adding extra prefixes for specific browsers. This step is done for you automatically
- Scoped selectors – you don’t have to think about naming conventions or methodologies like BEM to avoid selector collisions on your pages
- Dead code elimination – styled-components has an optional configuration to remove code which does not affect the program results
- Stylelint support – good real-time linting is priceless when you have to debug your styles
- React Native support – this is a huge feature! React Native supports only camelCase syntax by default but you can safely use styled-components to style native controls
- Theming – styled-components uses similar approach to new React context api for theming. Switching between different templates can be really easy!
- Server side rendering support – by using
StyleSheetManageryou can utilize all styles from the client side and returns them from the server side
- Code minification – your application will be smaller and what is important – this feature is enabled by default!
- Plugin for Jest test framework – an absolutely necessary thing for snapshot testing
- Plugins for popular editors – coding styles without syntax highlighting can be a pain in the neck but fortunately there are appropriate plugins for editors like VS Code, Sublime Text or Vim
As you can see, there are lot of features which you can use while working with styled-components.
Styled-components is a fantastic library for creating maintainable, reusable, scoped (ahhh so many advantages!) styles for React applications. It’s super easy to use and you don’t have to learn new syntax or commands. If you like additional features like nesting rules or mixins which come with preprocessors, you can use these features in styled-components too!
Of course, the idea behind styled-components can be really weird at the beginning of your journey but if you give it a try, you will love it.