styled-component-props
npm install styled-component-props
yarn add styled-component-props
How to use
- Pass direct props
;; const colors = default: "white" danger: "red" warning: "orange"; // fall back gives default color if nothing match here fallback is default means it will provide white colors. const StyledParagraph = styledp` color: ; font-size: 1rem;`; // use it as<StyledParagraph danger >My red paragraph</StyledParagraph>
- Pass Props as varient
;; const colors = default: "white" danger: "red" warning: "orange"; // fall back gives default color if nothing match here fallback is default means it will provide white colors. const StyledParagraph = styledp` color: ; font-size: 1rem;`; // use it as<StyledParagraph customColor="danger" >My red paragraph</StyledParagraph>
-
Pass default value in case you don't want fallback.
Note : default has least priority. In case you have provided fallback with default it will first check for fallback and then retun default value if fallback doen't match.
; ; const colors = default: "white" danger: "red" warning: "orange" ; // default value will be #ff0 if fall back and props doesn't matches with any of the colors property. const StyledParagraph = styledp` color: ; font-size: 1rem; `; // use it as <StyledParagraph customColor="info" >My red paragraph</StyledParagraph>