Welcome to the Custom Components from Styled-Components!
Tags: react, styledcomponents, beginners, css
Published: 2022-03-04 21:17:16

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. 

**<u>What is Styled-Components?</u> **

> 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
```

**<u>The Basics</u>**
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

```

**<u>Reuse of Existing Tags</u>**

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

**<u>Use Of Props in</u>**
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>
    </>
  )
}
```
**<u>Conditional Props</u>**
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