DEV Community

Cover image for Styled Components <💅>
Saish JagTap
Saish JagTap

Posted on • Edited on

Styled Components <💅>

#react #styledcomponents #cssinjs #reactstyledcomponents

  • 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 
npm install styled-components
Enter fullscreen mode Exit fullscreen mode
  • with yarn 
yarn add styled-components
Enter fullscreen mode Exit fullscreen mode

Import before using 

import styled from styled-components;
Enter fullscreen mode Exit fullscreen mode

Basic Styled Components

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

  • Button.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;
Enter fullscreen mode Exit fullscreen mode
  • App.jsx 
function App() { return ( <div className="App"> <StyledButton>Styled Button</StyledButton> </div> ); }
Enter fullscreen mode Exit fullscreen mode

Basic Styled Components

Styled Components with Props

Pass a function to a styled components template literal to adapt it based on its props.

  • Button.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;
Enter fullscreen mode Exit fullscreen mode
  • App.jsx 
function App() { return ( <div className="App"> <StyledButton>Styled Button</StyledButton> <div> <br /> </div> <StyledButton variant="outline">Styled Button</StyledButton> </div> ); }
Enter fullscreen mode Exit fullscreen mode

Styled Components using Props

Extending Styles

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

  • Button.js 
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; `;
Enter fullscreen mode Exit fullscreen mode
  • App.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> ); }
Enter fullscreen mode Exit fullscreen mode

Extending Styles

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

Top comments (0)