reactjs 如何消除此TypeScript错误..这显示了按钮组件样式中的错误

ddrv8njm 于 2022-11-04 发布在 React

关注(0)|答案(2)|浏览(132)

这是Error中显示的样式：
第一个
这就是准则

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
}

reactjs

来源：https://stackoverflow.com/questions/74271412/how-can-i-get-rid-of-this-typescript-error-this-shows-error-in-style-of-the-bu

2条答案

按热度按时间

2guxujil1#

请定义React样式按钮的返回类型。CSS属性

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
      }}

赞(0）回复(0）举报 2022-11-04

lrpiutwd2#

在这里，textTransform应该是texttransform，而在styleButton的末尾缺少了}。styleButton的正确代码应该如下所示：

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
      }}

赞(0）回复(0）举报 2022-11-04

我来回答

reactjs 如何消除此TypeScript错误..这显示了按钮组件样式中的错误

2条答案

相关问题

热门标签

最新问答