Styled Base UI component with parameter throws TypeScript error

Question

This tsx code:

import React from "react";
import BaseButton from "@mui/base/Button";
import styled from "@emotion/styled";

export const enum BUTTON_TYPE {
  MAIN = "main",
  LINK = "link",
}

const Button = ({
  text,
  type,
}: {
  text: string;
  type: BUTTON_TYPE;
}) => {
  return (
    <StyledButton type={type}>
      {text}
    </StyledButton>
  );
};

const getBorderColor = (type: BUTTON_TYPE): string => {
  if(type === BUTTON_TYPE.MAIN) {
    return "#abcabc";
  }
  else {
    return "#cbacba";
  }
};

const StyledButton = styled(BaseButton)<{
  type: BUTTON_TYPE;
}>`
  border: 1px solid ${({ type }) => getBorderColor(type)};
`;

export default Button;

Throws this error:

src/modules/Button/Button.tsx:18:6 - error TS2745: This JSX tag's 'children' prop 
expects type 'never' which requires multiple children, but only a single child was 
provided.

18     <StyledButton type={type}>
    ~~~~~~~~~~~~

src/modules/Button/Button.tsx:18:19 - error TS2322: Type 
'import("C:/ez/DS13/src/modules/Button/Button2").BUTTON_TYPE' is not assignable to type 
'never'.

18     <StyledButton type={type}>

What type change could fix the error?

score 1 · Accepted Answer · answered May 26 '23 at 19:19

The main issue is that your type prop of type BUTTON_TYPE conflicts with the type prop of <button> which has a type of "button" | "submit" | "reset". In the working example below, I have fixed it by using a different prop name of variant for that purpose on StyledButton. The Button type that is exported in your code still retains the type prop name, so usage would be the same as in your code.

import * as React from "react";
import BaseButton from "@mui/base/Button";
import styled from "@emotion/styled";

export const enum BUTTON_TYPE {
  MAIN = "main",
  LINK = "link"
}
const getBorderColor = (type: BUTTON_TYPE): string => {
  if (type === BUTTON_TYPE.MAIN) {
    return "#abcabc";
  } else {
    return "#cbacba";
  }
};

const StyledButton = styled(BaseButton, {
  shouldForwardProp: (propName) => propName !== "variant"
})<{ variant: BUTTON_TYPE }>`
  border: 1px solid ${({ variant }) => getBorderColor(variant)};
`;
const Button = ({ text, type }: { text: string; type: BUTTON_TYPE }) => {
  return <StyledButton variant={type}>{text}</StyledButton>;
};

export default function Demo() {
  return (
    <>
      <Button type={BUTTON_TYPE.MAIN} text="Hello" />
      <Button type={BUTTON_TYPE.LINK} text="World" />
    </>
  );
}

Resolving the prop conflict worked. I'm wondering, why the error message indicated a different reason. — Csati, May 30 '23 at 06:51
The original message was saying it conflicted with type `never` which indicates that `type` was typed in a way that can never be satisfied -- it can't be both `BUTTON_TYPE` and one of `"button" | "submit" | "reset"`. — Ryan Cogswell, May 30 '23 at 11:57

Styled Base UI component with parameter throws TypeScript error

1 Answers1