Our styled-components learning experience

<blockquote>Here at <a href="https://www.vinta.com.br/">Vinta</a>, we’ve been using React for quite some time. In our learning React adventure, some of us fell in love with <a href="https://www.styled-components.com/">styled-component</a> and recently, we have decided to introduce it in one of our projects.</blockquote><blockquote>Before using styled-components in our projects, we studied it and compared its usage with other styling methods. After making some experiments, we have decided that it would be great to try it in an actual project.</blockquote><blockquote>This post includes a collection of style-components material that has helped us to understand the package better and gave us more confidence when using it. If you already are using styled-components, you may find here some useful information about the package.</blockquote><h2 id="what-is-styled-components">What is styled-components?</h2><p>First of all, let’s understand what styled-components is. It is a CSS in JS styling lib that makes it easy to add styles to your components without the need of an extra CSS file.</p><p>For example, let’s say we want to create a custom button that works as follow:</p><ol><li>It is 44x44 pixels;</li><li>It has round borders;</li><li>It has a green background;</li><li>Its content is white and has a font size of 23 pixels;</li><li>If disabled the cursor is not allowed and it has an opacity of 50%.</li></ol><p>Using pure CSS we would need to create a <code>.css</code> file and add classes with the properties that we want. Then, we would need to import the <code>.css</code> file from our React component file and use the <code>className</code> prop in our button tag. Something like this:</p><pre><code>// style.css .custom-button { width: 44px; height: 44px; background-color: green; border: 1px solid green; border-radius: 50%; font-size: 23px; color: #fff; } .custom-button:disabled { opacity: 0.5; cursor: not-allowed; } </code></pre><pre><code>// CssButton.js import React from 'react'; import PropTypes from 'prop-types'; import './style.scss'; const CssButton = ({ children, ...rest }) => ( <button className="custom-button" {...rest} > {children} </button> ); CssButton.propTypes = { children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node, ]), }; export default CssButton; </code></pre><p>With Styled Components, there is no need for extra files. Here is an example of how we could do this custom button using the lib:</p><pre><code>import styled from 'styled-components'; const StyledButton = styled.button` width: 44px; height: 44px; background-color: green; border: 1px solid green; border-radius: 50%; font-size: 23px; color: #fff; &:disabled { opacity: 0.5; cursor: not-allowed; } `; export default StyledButton; </code></pre><p>Now that we understand what is Styled Components let's get into more details about the lib.</p><h2 id="why-styled-components">Why styled-components?</h2><p>First of all, we need to understand why styled-components. In this <a href="https://www.youtube.com/watch?v=bIK2NwoK9xk">talk</a> you can understand <a href="https://github.com/mxstbr">Max Stoiber’s</a> motivations to create this package. He also gives a quick introduction on its usage and on how it works.</p><p>Another great thing about styled-components is that you don’t need a whole lot of setting up to start using it. As you can see <a href="https://medium.freecodecamp.org/a-5-minute-intro-to-styled-components-41f40eb7cd55">here</a> you are able to install and start using it really quickly.</p><p>Another interesting point is that, with its last update, styled-component got a lot faster, as you can check <a href="https://medium.com/styled-components/announcing-styled-components-v4-better-faster-stronger-3fe1aba1a112">here</a>.</p><h2 id="what-can-we-do-with-styled-components">What can we do with styled-components?</h2><p>When using styled-components you have basically all the features you have when you use a stylesheet compiler like SASS or LESS, with one big difference, you don’t need to learn a single new thing. You’ll be able to do all the magic using just JavaScript and pure CSS.</p><p>You can check a more in depth guide with examples to styled-components <a href="https://www.codecamps.com/a-quick-guide-to-styled-components-with-interactive-examples/">here</a> and <a href="https://medium.com/styled-components/styled-components-getting-started-c9818acbcbbd">here</a>. But if you want the go even deeper into the details you can check the <a href="https://www.styled-components.com/docs/">styled-components docs</a>.</p><h2 id="how-does-it-work">How does it work?</h2><p>Style-components makes use of JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals">Template Literals</a> to style the components. It is a littler bit complicated to understand its foundations, but if you want, <a href="https://mxstbr.blog/2016/11/styled-components-magic-explained/">here</a> is a post by <a href="https://github.com/mxstbr">Max</a> explaining how the magic happens.</p><h2 id="some-extra-material">Some extra material</h2><p>Just to conclude, here you can find some extra info that may help you with styled-components.</p><ul><li>A quick comparative guide on the 4 ways to style your react components: <a href="https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822">here</a></li><li>A great React styling tutorial: <a href="https://blog.logrocket.com/the-best-styling-in-react-tutorial-youve-ever-seen-676f1284b945">here</a></li><li>Some tips for production development: <a href="https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/">Here</a> and <a href="https://medium.com/@jamiedixon/styled-components-production-patterns-c22e24b1d896">here</a>.</li><li>A package to help you test your styled-componenets: <a href="https://github.com/styled-components/jest-styled-components">here</a></li></ul><p>That's it, this should be enough material to help you understanding and start working with styled-components. If you have any thoughts or some material you’d like to share with us, please leave a comment.</p>

Our styled-components learning experience

Join the Tech Forward newsletter

Related articles

Technical Leadership: 3 Compelling Strategies for Demonstrating the Value of Your Work

3 Django apps for sending great e-mails

Understanding database multitenancy