javascript - 类型错误：类型 'string' 不能赋值给类型 'Colors'

我有一个状态组件按钮，它接收 color 和 title 的 props，color 在 TypeScript 中定义了不同的颜色

组件实例在我在本地主机上运行时可以运行，但当我尝试构建应用程序时会报错

类型错误：类型 'string' 不能赋值给类型 'Colors'。

主要组件

import React from 'react'

import styled from 'styled-components'
import capitalizeFirstLetter from '../../utils/capitalize-first-letter'

type Colors =
  | 'primary'
  | 'secondary'
  | 'success'
  | 'danger'
  | 'warning'
  | 'info'
  | 'light'
  | 'dark'
  | 'link'

const Styles = styled.button`
  outline: 0;
  border: 1px solid;
  background: #fff;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 50px;
  ${({ color }) => color === 'primary' && 'border-color: #0098db; color: #0098db;'}
  ${({ color }) => color === 'secondary' && 'border-color: #6c757d; color: #6c757d;'}
${({ color }) => color === 'success' && 'border-color: #6aea87; color: #6aea87;'}
${({ color }) => color === 'danger' && 'border-color: #dc3545; color: #dc3545;'}
${({ color }) => color === 'warning' && 'border-color: #ffc107; color: #ffc107;'}
${({ color }) => color === 'info' && 'border-color: #17a2b8; color: #17a2b8;'}
${({ color }) => color === 'light' && 'border-color: #f8f9fa; color: #212529;'}
${({ color }) => color === 'dark' && 'border-color: #343a40; color: #343a40;'}
`
export default function StatusButton({ title, color }: { title: string; color: Colors }) {
  return <Styles color={color}>{capitalizeFirstLetter(title)}</Styles>
}

组件实例

<StatusButton title={`${blog.status.isPublished ? 'Online' : 'Offline'}`} color={`${blog.status.isPublished ? 'success' : 'warning'}`}/>

答案＃1

你正在将你的 color 值包裹在模板字面量中，因此将其转换为普通字符串。请改用以下方式：

<StatusButton title={`${blog.status.isPublished ? 'Online' : 'Offline'}`} color={blog.status.isPublished ? 'success' : 'warning'}/>

在那种情况下，TypeScript 应该足够智能，能够将 'success' 和 'warning' 视为计入 Colors 的常量。

答案＃2

 <Alert onClose={handleMessageClose} 
 severity={messageType == "success" ? "success" : messageType == "error" ? "error" : messageType == "info" ? "info" : "warning"} 
 sx={{ width: '100%' }}>
 {message}
</Alert>