Welcome to the Custom Components from Styled-Components!

If you are practicing React or similar JS library then sometimes its a hectic operation to make multiple divs or HTML tags. And Styling them into that HTML tags and managing them is a hard work too.

To make your own custom stlyed components, "Styled-Components" is a popular solution for this type of task.

*What is Styled-Components? *

styled-components is the result of wondering how we could enhance CSS for styling React component systems.

Some Advantages of Styled Components:

Personalized Component name
No class name conflict
Easy deletetaion of CSS and troubleshooting
Dynamic styling with prop values
Basic CSS, Easy maintanece etc.

As we got the basic idea what actually it is.

Before getting into the basics lets know how to install it.

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

The Basics
Lets dig into it.
the basics of Styled-components format is:

const ComponentName = styled.h1`
    font-size: 1em; 
    color: red; 
`

This type of component creation can be done in the same file or can be also written in a separate file too.

if we look into a real styling the overall view will be:

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>

//source: styled-components documentation

Reuse of Existing Tags

Also we can reuse the existing styled component like

const Button = styled.button`
     color: red;
     font-size: 1em;
     margin: 1em;
     padding: 0.25em 1em;
     border: 2px solid palevioletred;
     border-radius: 3px;
`;

// A new component based on Button, but with some override styles
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;

render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);
`

Use Of Props in
Styled-components can have props to make similar component reusable. For example,

const Headline = styled.h1`
  color: ${props => props.color};
`

function App() {
  return (
    <>
    <Headline color="red">
      Text 
    </Headline>
    <Headline color="blue">
      Text 
    </Headline>
    </>
  )
}

Conditional Props
These props are dynamic inputs, it can be useable in conditional cases.

const Headline = styled.h1`
  visibility: ${props => (
    props.show ? "visible" : "hidden")
  };`

function App() {
  return (
    <Headline show={false}>
      Text 
    </Headline>
  )
}

These are primary basics of styled components.
Also the styled Components has some advanced uses too.
For more visit the styled components Documentation Here: https://styled-components.com/docs/basics#motivation

Blog

Welcome to the Custom Components from Styled-Components!

Fahim Hossain

Join Our Newsletter. No Spam, Only the good stuff.

Related