TYPESCRIPT

How to use Styled-Components

// INSTALL:
npm install --save styled-components

// IMPORT: i prefer to create a file for each component. Ex.: Button-Styled.js 
// (rather than a single file with all styled components, gets messy)
import styled from 'styled-components'

// USE: create a new file called componentName-Styled.js
// define a var with the name of the component = styled.htmltag`CSS styles`
const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
`

how to create styled components

import styled from 'styled-component';

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

styled componennts

npm install --save styled-componentsnpm install --save styled-components

styled components tw

const Button = tw.div`
    ${(p) => (p.$primary ? "bg-indigo-600" : "bg-indigo-300")}

    flex
    inline-flex
    items-center
    border
    border-transparent
    text-xs
    font-medium
    rounded
    shadow-sm
    text-white

    hover:bg-indigo-700
    focus:outline-none
`