Introduction to Styled Components

This article would have us jumping straight to introducing the concepts and approaches of using styled components in styling our React components.

Styled components follow the paradigm of CSS-in-JS. To use styled components, first, we would have to install and import it into our react project since it doesn’t come with react pre-built.

Our normal react application looks like this:

     export default function Component() {
        return (
         <div>
            <p>Hello World </p>
         </div>
        )
     } 

Now instead of styling, this React component by littering everywhere with classNames, we could use styled components to style the components. Styled components make sure that styles don’t leak from one component to another.
To get started using styled-components, we would have to import it first into our project as so

    import styled from 'styled-components';

To style the div in our component above, we would do the following

    const DivWrapper = styled.div`
      width: 50%;
      border: 2px solid black;
    `;

The variable is named as so, starting with a capital letter, because it’s actually a component. Now we would have to replace our div with the DivWrapper we just created. Below is the code demonstrating how:

     export default function Component() {
     return (
      <DivWrapper>
        <p>Hello Styled component</p>
      </DivWrapper>
     )
     }

By doing this, the styled associated with DivWrapper is applied to our component.

It’s wise to note that, styled components should never be declared within a class or function component but outside the scope of both.

We could go further to style the <p> tag by doing these:

     const Paragraph = styled.p`
       font-size: 32px;
     `;

With these we could replace the <p> tag with the Paragraph styled component and the styles are applied.

Styled components support some syntaxes that come baked into preprocessors like Less and Sass, such as nesting and creation of mixins.

Just like any other react component, the styled-component receives props and gives the developer the ability to make certain style decisions with regards to what is being passed as a prop to the styled-component. To illustrate this, say our DivWrapper styled wrapper, was going to be re-usable by other components, then the need would arise for us to specify certain style guidelines that would differ based on the choice of the developer, one of such could be the background color of the divs. How can we do this with styled-components?

First, we would need to pass to our styled-component a prop of color as so:

  <DivWrapper
    color= 'blue'
  >

  </DivWrapper>

Now in our styled-component declaration, we would do the following:

  const DivWrapper = styled.div`
    width: 50%;
    border: 2px solid black;
    ${props => (props.color === 'blue') ? `background-color: blue`: null}
    ${props => (props.color === 'red' ? `background-color: red`: null)}
  `;

Styled components can inherit from each other, how do we mean. A styled component can re-use the styles present in another styled component. To illustrate, say we have another div but this time it has a background color of red, instead of creating a totally different styled component, we can create one that inherits all the properties of the former div styled component DivWrapper and then add the additional styles it relies on. Here is how:

    const DivWrapper2 = styled(DivWrapper)`
        background-color: 'blue';
    `;

When we use the styled component DivWrapper2, it inherits the styles, width, and border from the DivWrapper component.

Styled components are great for styling React components. If you are looking at digging deep into styled components, visit the official site here.