DEV Community

loading...
Cover image for Introduction to Styled Components

Introduction to Styled Components

ogwurujohnson profile image Johnson Ogwuru ・3 min read

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>
        )
     } 
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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

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

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>
     )
     }
Enter fullscreen mode Exit fullscreen mode

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;
     `;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)}
  `;
Enter fullscreen mode Exit fullscreen mode

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';
    `;
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (4)

Collapse
agronick profile image
Kyle Agronick

Where is props coming from in the second to last example? Is it something that is transpiled in?

Collapse
dance2die profile image
Sung M. Kim • Edited

When you pass a prop to DivWrapper, <DivWrapper color='blue'>...</DivWrapper>

styled will pass the prop and make it available auto"magically".

  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)}
  `;

And @ogwurujohnson , Shouldn't the color prop passed as my example above instead of like <DivWrapper color: 'blue'>?

Collapse
ogwurujohnson profile image
Johnson Ogwuru Author

Yeah, you are right. Lol was a typo. Would correct that immediately.

Collapse
ogwurujohnson profile image
Johnson Ogwuru Author • Edited

We passed the props a code example above, when we did something like this:

<DivWrapper
    color= 'blue'
  >

  </DivWrapper>
Forem Open with the Forem app