Styled Components Overview

What are styled components:

They are basically set of components that allows us to write JavaScript in a very elegant and reusable way.

So when we want to use styled components the first thing we do is to create react app then

npm i styled-components

Introduction to Styling with styled components

In our regular JSX assuming we want to style a div we use classes (This time we are using a className of container)

<div className="container">
  <h1>Hello World</h1>
</div>

But in styled components we do

<Container>
  <h1>Hello World</h1>
</Container>

So assuming we want to change the background using css we do

.container{
   background: violet;
}

Then using styled components we have

import React from "react";
import styled from "styled-components";

function App() {
  const Container = styled.div`
    background: #fdaefb;
  `;
  return (
    <Container>
      <h1>Hello World</h1>
    </Container>
  );
}

In other to clean up our code we can also create a file for container then name the file container.styled.js And write all our styled components code then export them

import styled from "styled-components";

const Container = styled.div`
  width: 1000px;
  max-width: 100%;
  padding: 0 20px;
  margin: 0 auto;
`;

export default Container;

In order to make our code much more cleaner and readable

Nested Styling

Assuming we have a h1 inside a header this way

import StyledHeader from "./styles/Header.styled";
const Header = () => {
  return (
    <StyledHeader>
      <h1> Hubble </h1>{" "}
    </StyledHeader>
  );
};

export default Header;

We can styled the h1 by styling the header first then nesting the h1 as seen in the code below

import styled from "styled-components";

const StyledHeader = styled.header`
  background-color: #ebfbff;
  padding: 40px 0;

  h1 {
    color: red;
  }
`;

export default StyledHeader;

Let's say we want to pass in a prop of bg and also assuming we want to change the h1 color in the StyledHeader, we now do

import StyledHeader from "./styles/Header.styled";
const Header = () => {
  return (
    <StyledHeader bg="red" color="white">
      <h1> Hubble </h1>{" "}
    </StyledHeader>
  );
};

export default Header;

The come to the styles and pick it as props

import styled from "styled-components";

const StyledHeader = styled.header`
  background-color: ${(props) => props.bg};
  padding: 40px 0;

  h1 {
    color: ${(props) => props.color};
  }

  &:hover {
    background-color: grey;
  }
`;

export default StyledHeader;

Themes in styled components

There maybe values we may want to have in a global state where we can easily change them things like the header color, the body, the footer color.

So if you are familiar with context API in react theme provider won't be much of an issue. So We wrap our entire app with a theme provider then pass in a value (Theme) to the provider which is usually and object and can be accessed anywhere in our app.

import { ThemeProvider } from "styled-components";
const theme = {
    colors: {
      header: "#ebfbff",
      body: "#fff",
      footer: "#003333",
    },
  };
}

//Then we wrap the entire app this way
<ThemeProvider theme={theme}>
      <>
        <Header />
        <Container>
          <h1> Hello World </h1>
        </Container>
      </>
    </ThemeProvider>

So assuming we now want to access this from the styled component Provider from StyledHeader we can now

import styled from "styled-components";

const StyledHeader = styled.header`
  background-color: ${(props) => props.theme.colors.header};
  padding: 40px 0;

`;

export default StyledHeader;

From the above code the theme is a props that can be accessed from any component so for the header we want to have a particular color of as designed in the theme object (props)=>props.theme.colors.header OR we can destructure by ({theme})=>theme.colors.header

Creating Global Styles with styled components

Global styles like setting styles for the body, editing the body style and removing the native padding, box-sizing, overflow-x and margin html/CSS comes with.

So we create a file Global.js

import { createGlobalStyle } from "styled-components";

Then we dive straight into the code by writing what we want our global styles to look like

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
   box-sizing: border-box;
   padding:0;
   margin:0;
   overflow-x: hidden;
}

body{
   font-family: 'Inter', sans-serif;
   font-size: 1.15em;
   background: #fff;
//OR
//This is from the Provider Prop
background-color: ${({ theme }) => theme.colors.body};
   margin: 0;
}

`;

export default GlobalStyle;

After we have set this Global styles We now import it to our app.js file this way

<ThemeProvider theme={theme}>
      <>
        //The Global style is here.
        <GlobalStyle />
        <Header />
        <Container>
          <h1> Hello World </h1>
        </Container>
      </>
    </ThemeProvider>

I think this is pretty much for styled components, thank you for reading this article. Happy Coding.

References: styled-components.com/docs/advanced#referri..