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