Styled Components <💅>
Tags: react, styledcomponents, cssinjs, reactstyledcomponents
Published: 2022-10-16 17:23:04

- Styled Component is a library built for React and React Native.
It allows to use component level styles in application.

- Styled Components are built on tagged template literals, which means, the CSS code is written in between backticks.

### Installation

- with npm
```cmd
npm install styled-components
```

- with yarn
```cmd
yarn add styled-components
```

### Import before using
```jsx
import styled from styled-components;
```

### Basic Styled Components
> Create Button Component with the help of styled-components and can be reuse anywhere without worrying about its CSS.

- Button.jsx
```jsx
import styled from "styled-components";

const StyledButton = styled.button`
  border: 2px solid #4caf50;
  background-color: #4caf50;
  color: white;
  padding: 15px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  cursor: pointer;
  transition: 0.5s all ease-out;
`;

export default StyledButton;
```

- App.jsx
```jsx
function App() {
  return (
    <div className="App">
      <StyledButton>Styled Button</StyledButton>
    </div>
  );
}
```

![Basic Styled Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qyt500z3ihcbnt5syalk.png)

### Styled Components with Props
> Pass a function to a styled components template literal to adapt it based on its props.

- Button.jsx
```jsx
import styled from "styled-components";

const StyledButton = styled.button`
  border: 2px solid #4caf50;
  background-color: #4caf50;
  color: white;
  background-color: ${(props) =>
    props.variant === "outline" ? "#fff" : "#4caf50"};
  color: ${(props) => (props.variant === "outline" ? "#4caf50" : "#fff")};
  padding: 15px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  cursor: pointer;
  transition: 0.5s all ease-out;
`;
export default StyledButton;
```

- App.jsx
```jsx
function App() {
  return (
    <div className="App">
      <StyledButton>Styled Button</StyledButton>
      <div>
        <br />
      </div>
      <StyledButton variant="outline">Styled Button</StyledButton>
    </div>
  );
}
```

![Styled Components using Props](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hy821lpklc6bjc90wbip.png)

### Extending Styles
> To easily make a new component that inherits the styling of another, just wrap it in the `styled()` constructor.

- Button.js
```jsx
import styled from "styled-components";

export const StyledButton = styled.button`
  border: 2px solid #4caf50;
  background-color: ${(props) =>
    props.variant === "outline" ? "#fff" : "#4caf50"};
  color: ${(props) => (props.variant === "outline" ? "#4caf50" : "#fff")};
  padding: 15px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  cursor: pointer;
  transition: 0.5s all ease-out;
`;

export const FancyButton = styled(StyledButton)`
  background-image: linear-gradient(to right, #f6d365 0%, #fda085 100%);
  border: none;
`;
```

- App.jsx
```jsx
function App() {
  return (
    <div className="App">
      <StyledButton>Styled Button</StyledButton>
      <div>
        <br />
      </div>
      <StyledButton variant="outline">Styled Button</StyledButton>
      <div>
        <br />
      </div>
      <FancyButton as="a">Fancy Button</FancyButton>
      {/* as - is a polymorphic prop => pass anchor tag */}
    </div>
  );
}
```

![Extending Styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/debioxqs1zrzqzn5rj3r.png)

### Conclusion
- Styled Components are a CSS-in-JS tool that bridges the gap between components and styling, offering numerous features to running in a functional and reusable way.
- Documentation: https://styled-components.com/docs