I have a status ponent button that receives props of color and title, the color has different colors defined in typescript

the ponent instance runs when I run it on localhost but throw an error when I try to build the application

Type error: Type 'string' is not assignable to type 'Colors'.

Main Components

import React from 'react'

import styled from 'styled-ponents'
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>
}

Component Instance

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

I have a status ponent button that receives props of color and title, the color has different colors defined in typescript

the ponent instance runs when I run it on localhost but throw an error when I try to build the application

Type error: Type 'string' is not assignable to type 'Colors'.

Main Components

import React from 'react'

import styled from 'styled-ponents'
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>
}

Component Instance

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

• javascript
• reactjs
• typescript
• next.js

2 Answers 2

You're wrapping your color value in a template literal, therefore converting it to a regular string. Use this instead:

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

TypeScript should in that case be smart enough to see 'success' and 'warning' as constants that count as Colors.

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