How can I get rid of this TypeScript error.. This shows error in style of the button component-CodePudding

**This is the Error shows in the style of.. **

<Button 
style =

`No overload matches this call. Overload 1 of 3, '(props: { href : string; } & { children?: React Node; classes?: Partial | undefined; color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "inherit" | undefined; 9 more ; variant?: "text" | 2 more | undefined; } & Omit<> & Common Props & Omit<>): Element', gave the following error. .

        
`



**And this is the Code ..****

``
import React from 'react'
import { Button } from '@mui/material'


type Props = {
  title: string
  type?: string
  style?: React.CSSProperties
  onClick?: (args: any) => void;
  isActive?: boolean
}

const ButtonComponent = (props: Props) => {
  const styleButton = (type: string, isActive: boolean) => {
    if (type === 'tabButton')
      return {
        width: '200px',
        height: '40px',
        padding: '10px 20px',
        borderRadius: '20px',
        fontSize: '16px',
        fontFamily: 'Open Sans',
        fontWeight: isActive? '700':'400',
        color: isActive? '#FFFFFF': '#161F29',
        background: isActive?'#161F29':'rgba(255, 255, 255, 0.5)',
        border: '1px solid rgba(22, 31, 41, 0.5)',
        textTransform: 'capitalize'
      }

 return (
    <div>
      <Button
        style = {styleButton(props.type || '', props.isActive || false)}
        onClick= {props.onClick
        }
      >
          {props.title}
       
      </Button>
    </div>
  )

}

export default ButtonComponent;

ButtonComponent.defaultProps = {
  title: "",
  type: "",
  style: {},
  onClick: () => null,
  isActive: false
}
``

CodePudding user response：

Here, textTransform should be texttransform and you're missing "}" in then end of styleButton. The correct code for styleButton should look like this. enjoy

  const styleButton = (type: string, isActive: boolean) => {
    if (type === 'tabButton')
      return {
        width: '200px',
        height: '40px',
        padding: '10px 20px',
        borderRadius: '20px',
        fontSize: '16px',
        fontFamily: 'Open Sans',
        fontWeight: isActive? '700':'400',
        color: isActive? '#FFFFFF': '#161F29',
        background: isActive?'#161F29':'rgba(255, 255, 255, 0.5)',
        border: '1px solid rgba(22, 31, 41, 0.5)',
        textTransform: 'capitalize' as const
      }}

CodePudding user response：

Plese define the return type of style button to React.CSSProperties

const styleButton = (type: string, isActive: boolean):React.CSSProperties  => {
    if (type === 'tabButton')
      return {
        width: '200px',
        height: '40px',
        padding: '10px 20px',
        borderRadius: '20px',
        fontSize: '16px',
        fontFamily: 'Open Sans',
        fontWeight: isActive? '700':'400',
        color: isActive? '#FFFFFF': '#161F29',
        background: isActive?'#161F29':'rgba(255, 255, 255, 0.5)',
        border: '1px solid rgba(22, 31, 41, 0.5)',
        textTransform: 'capitalize' as const
      }}