**This is the Error shows in the style of.. **
<Button
style =
`
`沒有多載匹配這個呼叫。多載 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',給出以下錯誤。.
`
**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
}
``
uj5u.com熱心網友回復:
在這里,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
}}
uj5u.com熱心網友回復:
請定義樣式按鈕的回傳型別到 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
}}
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/524776.html
標籤:反应打字稿下一个.js风格反应 CSS 模块
上一篇:獲取方法的第二個引數的型別
下一篇:用一個回圈展平物件陣列