我有一个 Button.tsx 文件，我在其中使用情感样式来设置 3 个按钮的样式

Question

type SubPortalButtonProps = {
  name: JSX.Element;
  buttonType?: "clear" | "search" | "availabilty";
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
};

type SubPortalButtonStyledProps = {
  typeOfButton?: "clear" | "search" | "availabilty";
};

const SubPortalButtonStyled = styled.button`
${(props:SubPortalButtonStyledProps) =>
  props.typeOfButton ==="clear" ? {
          background: "linear-gradient( #eaf0f7 30%,#ecf2f8  , #cadbeb 60%)",
          width: "7.5rem",
          height: "1.6rem",
          borderRadius: ".1rem",
          marginLeft:"1rem",
          fontSize: "1rem",
          textAlign: "center",
          borderWidth: ".01px",

  } : props.typeOfButton ==="search" ? {
      background: "linear-gradient( #659efa 30%,#3b85fc  , #0d68fe 60%)",
      color: "white",
      width: "10rem",
      height: "2.3rem",
      float: "right",
      margin: ".6rem 1rem 2rem 1rem",
      borderRadius: ".1rem",
      fontSize: "1.3rem",
      borderWidth: ".01px",
  } : props.typeOfButton == "availabilty" ? {
      color: "#306767",
      width: "11.5rem",
      paddingTop: ".3rem",
      paddingBottom: "1.5rem",
      marginLeft: "0.1rem",
      background: "linear-gradient(rgb(203, 225, 236) 10%,#fff 40%, rgb(203, 225, 236))",
      borderWidth: ".01px",
      height: "1.3rem",
      paddingLeft: "5px",
      textAlign: "left",
      top: ".5rem",
      fontSize: ".90rem",
      fontWeight: "900",
      transitionDuration: "0.4s",
      ":hover": {
        background:
          "linear-gradient(rgb(166, 214, 238) 10%,#fff 40%, rgb(177, 203, 216))",
        color: "#113a3a",
      },
  } : null   
}:`

Here I am getting the below error when I provide ":null" as in the above ternary operator.

     No overload matches this call.
      Overload 1 of 2, '(...styles: Interpolation<SubPortalButtonStyledProps & { theme: object; }> 
[]): StyledComponent<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, SubPortalButtonStyledProps, object>', gave the following error.
Argument of type 'TemplateStringsArray' is not assignable to parameter of type 'Interpolation<SubPortalButtonStyledProps & { theme: object; }>'.
  Type 'TemplateStringsArray' is not assignable to type 'ObjectInterpolation<SubPortalButtonStyledProps & { theme: object; }>'.
    Types of property 'filter' are incompatible.
      Type '{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string[]; }' is not assignable to type 'string | string[] | undefined'.
        Type '{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string[]; }' is missing the following properties from type 'string[]': pop, push, concat, join, and 28 more.
      Overload 2 of 2, '(template: TemplateStringsArray, ...styles: Interpolation<SubPortalButtonStyledProps & { theme: object; }>[]): StyledComponent<...>', gave the following error.
Argument of type '(props: SubPortalButtonStyledProps) => { background: string; width: string; height: string; borderRadius: string; marginLeft: string; fontSize: string; textAlign: "center"; borderWidth: string; color?: undefined; float?: undefined; ... 7 more ...; ":hover"?: undefined; } | { ...; } | { ...; } | null' is not assignable to parameter of type 'Interpolation<SubPortalButtonStyledProps & { theme: object; }>'.
  Type '(props: SubPortalButtonStyledProps) => { background: string; width: string; height: string; borderRadius: string; marginLeft: string; fontSize: string; textAlign: "center"; borderWidth: string; color?: undefined; float?: undefined; ... 7 more ...; ":hover"?: undefined; } | { ...; } | { ...; } | null' is not assignable to type 'FunctionInterpolation<SubPortalButtonStyledProps & { theme: object; }>'.
    Type '{ background: string; width: string; height: string; borderRadius: string; marginLeft: string; fontSize: string; textAlign: "center"; borderWidth: string; color?: undefined; float?: undefined; ... 7 more ...; ":hover"?: undefined; } | { ...; } | { ...; } | null' is not assignable to type 'Interpolation<SubPortalButtonStyledProps & { theme: object; }>'.
      Type '{ color: string; width: string; paddingTop: string; paddingBottom: string; marginLeft: string; background: string; borderWidth: string; height: string; paddingLeft: string; textAlign: "left"; top: string; ... 6 more ...; margin?: undefined; }' is not assignable to type 'Interpolation<SubPortalButtonStyledProps & { theme: object; }>'.
        Type '{ color: string; width: string; paddingTop: string; paddingBottom: string; marginLeft: string; background: string; borderWidth: string; height: string; paddingLeft: string; textAlign: "left"; top: string; ... 6 more ...; margin?: undefined; }' is not assignable to type 'ObjectInterpolation<SubPortalButtonStyledProps & { theme: object; }>'.
          Types of property 'fontWeight' are incompatible.
            Type '"900"' is not assignable to type 'FontWeightProperty | FontWeightProperty[] | (Globals | "bold" | "normal" | "bolder" | "lighter")[] | undefined'.ts(2769) 

Also while I use the same code in another projects there are no issues and the code runs smoothly. How do fix this? Is it because of some project cache or something? If so how do I clear it?

Answer 1

In this case, I recommend using css functions, see how easy it is to use it, and your code will become cleaner and readable:

import css, { styled } from 'styled-components';

type SubPortalButtonProps = {
  name: JSX.Element;
  buttonType?: 'clear' | 'search' | 'availabilty';
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
};

export const buttonVariant: Record<NonNullable<SubPortalButtonProps['buttonType']>, ReturnType<typeof css>> = {
  clear: css`
    background: "linear-gradient( #eaf0f7 30%,#ecf2f8  , #cadbeb 60%)",
    width: "7.5rem",
    height: "1.6rem",
    borderRadius: ".1rem",
    marginLeft:"1rem",
    fontSize: "1rem",
    textAlign: "center",
    borderWidth: ".01px",
  `,
  search: css`
    background: "linear-gradient( #659efa 30%,#3b85fc  , #0d68fe 60%)",
    color: "white",
    width: "10rem",
    height: "2.3rem",
    float: "right",
    margin: ".6rem 1rem 2rem 1rem",
    borderRadius: ".1rem",
    fontSize: "1.3rem",
    borderWidth: ".01px",
  `,
  availabilty: css`
    color: "#306767",
    width: "11.5rem",
    paddingTop: ".3rem",
    paddingBottom: "1.5rem",
    marginLeft: "0.1rem",
    background: "linear-gradient(rgb(203, 225, 236) 10%,#fff 40%, rgb(203, 225, 236))",
    borderWidth: ".01px",
    height: "1.3rem",
    paddingLeft: "5px",
    textAlign: "left",
    top: ".5rem",
    fontSize: ".90rem",
    fontWeight: "900",
    transitionDuration: "0.4s",

    ":hover": {
      background:
        "linear-gradient(rgb(166, 214, 238) 10%,#fff 40%, rgb(177, 203, 216))",
      color: "#113a3a",
    },
  `,
};

export const Button = styled.button<SubPortalButtonProps>`
  ${({ buttonType }) => buttonVariant[buttonType]};
  // someDuplicateCSS: values;
`; 

and using in tsx file:

<>
 <Button buttonType="clear" name="clearButton" />
 <Button buttonType="search" name="searchButton" />
 <Button buttonType="availability" name="availabilityButton" />
</>

I hope this makes sense. some duplicate properties can be taken out as a function in the initialization of the style component itself