learn-styled-components.md

Styled components

• Amazing read - How to Refactor SCSS Variables for Styled Components: Click here
• Continue reding docs from here.

# install
npm i styled-components @types/styled-components

Using uss at two places

// PLEASE DON"T USE SEPARATE MEDIA QUERIES THIS WAY if you want to share code b/w them, this is a contrived example to show usage of css in multiple places only.
// IDEAL WAY for below is to instead use like #MASTER_PLAN# section code block.

const CssForColumnView = css`
  & {
    flex-direction: column-reverse;
  }
  .text__details {
    padding-inline-start: 0px;
  }
`;

const MoviePosterWithAdditionDetails = styled.div`
  display: flex;
  .text__details {
    margin: auto;
    padding-inline-start: 24px;
    text-align: left;
  }
  @media (max-width: ${XL_MEDIA_BREAKPOINT}) and (min-width: ${LG_MEDIA_BREAKPOINT}) {
    ${CssForColumnView}
  }
  @media (max-width: ${MD_MEDIA_BREAKPOINT}) {
    ${CssForColumnView}
  }
`;

// #MASTER_PLAN#
const MoviePosterWithAdditionDetails = styled.div`
  display: flex;
  .text__details {
    margin: auto;
    padding-inline-start: 24px;
    text-align: left;
  }
  @media (max-width: ${XL_MEDIA_BREAKPOINT}) and (min-width: ${LG_MEDIA_BREAKPOINT}), (max-width: ${MD_MEDIA_BREAKPOINT}) {
    & {
      flex-direction: column-reverse;
    }
    .text__details {
      padding-inline-start: 0px;
    }
  }
`;

Add props type and defaultProps to styled component

Add class to styled component - 💕❤😘

Source: Click here

const FormWrapper = styled.div.attrs({
  className: 'myDesiredClassHere',
  })`
    .input {
    /* Custom Styles */
    }

Simple usage

import styled from 'styled-components'

const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  display: block;
`;


 <Button>Normal Button</Button>

Thats how you wrap an existing component with `styled

Stackoverflow Answer: Click here

Below Codesandbox Link: Click here

// DatingMatch.tsx
type RoundBtnPropsType = {
  className?: string;
  onClick: () => void;
  src: string;
  alt: string
};

function RoundBtnWithImage({
  onClick,
  src,
  alt,
  className,
}: RoundBtnPropsType) {
  return (
    <button className={className ?? ''} onClick={onClick} type="submit">
      <img src={src} alt={alt} />
    </button>
  );
}
RoundBtnWithImage.defaultProps = {
  className: '', // This facilitates us to skip passing className prop to the `RoundButtonWithImageStyled` when we actually use it in JSX. FYI: If you add a className prop to `RoundButtonWithImageStyled` then that class will also be assigned to `button` tag as well. AWESOME, isn't IT!
};

const RoundButtonWithImageStyled = styled(RoundBtnWithImage)`
  height: 60px !important;
  aspect-ratio: 1 !important;
  background: red !important;
  border-radius: 100% !important;
`;

// in JSX
const MyComp = () => <div><RoundButtonWithImageStyled onClick={() => {}} src="" alt="Pass Button Here" /></div>

Another Example(older example):

Source: Click here

In docs: Click here

Well not the last example:

Conditionally effective css, i.e., only effective if the prop passed has those values: $invertColorOnHover and $lightBorder.

Passing value from prop to css

Docs: Adapting based on props

import { Button } from 'react-bootstrap';
import styled from 'styled-components';

const RoundButton = styled(Button)`
  height: ${(props) => (props.height ?? 'auto')};
  border-radius: 50rem;
`;

export default RoundButton;


// USAGE:
<RoundButton
  variant="primary"
  type="submit"
  className="w-100 px-5"
  size="sm"
  height="40px" // <<<<<<<<<< if not provided it would be considered 'auto'
>
  Next Step
</RoundButton>

Also, for above you might get error like that (considering that prop name is lightBorder instead of height)!

So to fix that you just need to append $ to your prop name(this is new from styled version 5.0 above)

Source: Click here

Why styled uses tagged literals and how does it even work?

Source: Click here

Don't rely on name of styled-components classNames!

Because they change on every change in style properties when you alter then.

So, what to use to make easy find classes in Elements tab in browser console? Simply assign temporary ids, because they are best reliable for this particular need of development.

IMPORANT THIS: They remain constant (both of the class names) of any html elment across all usages in the project if no styles are changed.