Styled Components with Typescript and defined (default) props

gistfile1.txt

import styled, { DefaultTheme } from "styled-components";
import { defaultTheme } from "../styles/theme";


type ButtonProps = Partial<{
    size: 's'|'m'|'l',
    theme?: DefaultTheme,
    block: boolean,
    backgroundColor: string;
    borderColor?: string;
    fontColor: string;
    minWidth?: string;
    height?:string;
    fontSize?:string;
    lineHeight?:string;
    disabled: boolean;
}>

export const Button = styled.button<ButtonProps>`
    color : ${p=>p.fontColor||'#ffffff'};

    background: ${p=>p.borderColor?'none':(p.backgroundColor||p.theme.colors.info)};
    border: ${p=>p.borderColor?`1px solid ${p.borderColor}`:'none'};
    display: ${p=>p.block?'block':'inline'};
    font-weight: bold;
    min-width: ${p=>{
        if(p.minWidth) return p.minWidth;
        switch(p.size){
            case 'm': return '159px';
            case 's': return '122px';
            default: return '165px';
        }
    }};
    height: ${p=>{
        if(p.height) return p.height;
        switch(p.size){
            case 'm': return '48px';
            case 's': return '40px';
            default: return '56px';
        }
    }};
    font-size: ${p=>{
        if(p.fontSize) return p.fontSize;
        switch(p.size){
            case 'm': return '0.875rem';
            case 's': return '0.75rem';
            default: return '1rem';
        }
    }};
    line-height: ${p=>{
        if(p.height) return p.height;
        switch(p.size){
            case 'm': return '1.25rem';
            case 's': return '1rem';
            default: return '1.5rem';
        }
    }};
    border-radius: ${p=>{
        switch(p.size){
            case 'm': return '8px';
            case 's': return '6px';
            default: return '12px';
        }
    }};

    

    /* User Interface*/
    cursor: pointer;

    :hover{
        filter: brightness(110%);
    }

    :active{
        filter: brightness(130%);
    }

    transition: filter .3s;

    /* Disabled Styling */
    ${p=>p.disabled?`
        background-color:${p.theme.colors.grey2};
        color: #A0A5BA;
        cursor: default;
        :hover{
            filter: none;
        }
    `:""}
`;

Basically, no defaultProps or propTypes is used here. Just an interface is defined that defines the prop types. By Partial<...> they are all optional. "default Props" are realized by setting a default value in the CSS code if the provided attribute is undefined.