"類型錯誤：類型“字符串”不可分配給類型“顏色”"

Question

我有一個接收顏色和標題道具的狀態組件按鈕，顏色在打字稿中定義了不同的顏色

組件實例在我在 localhost 上運行時運行，但在我嘗試構建應用程序時拋出錯誤

類型錯誤：類型“字符串”不可分配給類型“顏色”。

主要成分

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

Answer 1

您將color值包裝在模板文字中，因此將其轉換為常規字符串。 改用這個：

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

在這種情況下，TypeScript 應該足夠聰明，可以將'success'和'warning'視為算作Colors常量。

Answer 2

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

"