React Styled Components

npm i styled-components

import styled from "styled-components";

---

• Attributes

  export const BasicInput = styled.input.attrs(() => ({
    type: 'text',
    placeholder: "Enter Value"
  }))`
    margin: 1rem;
  `;
        

---

• CSS Helper Function

    import styled, { css } from "styled-components";
  
    const Box = css`
      width: 150px;
      height: 150px;
      margin: 1rem;
      border: 2px solid ${({color}) => color};
    `;
  
    export const RedBox = styled.div`
      ${Box}
    `;
    export const GreenBox = styled.div`
      ${Box}
    `;
  

    <RedBox color="red"/>
    <GreenBox color="green"/>
  

---