Type {} is not assignable to type CSSProperties. typescript

Question

How can I assign inline CSS to an element? I get an error if I write this, the error is:

Type '{ backgroundColor: string; color: string; marginRight: number; borderRadius: number; borderRight: number; borderLeft: number; borderTop: number; borderBottom: string | false; }' is not assignable to type 'CSSProperties'.   Types of property 'borderBottom' are incompatible.     Type 'string | false' is not assignable to type 'string | number | (string & {}) | undefined'.       Type 'false' is not assignable to type 'string | number | (string & {}) | undefined'.

<span style={{backgroundColor:backgroundColor,color:color,marginRight:3,borderRadius:4,borderRight:0,borderLeft:0,borderTop:0,borderBottom: isCurrent && '3px solid #00416d'}}>{Symbol}</span> 

Answer 1

Your error says Type 'string | false' is not assignable to type 'string | number | (string & {}) | undefined'.

This is because the expression: { ... borderBottom: isCurrent && '3px solid #00416d' gives string if isCurrent, otherwise gives false.

You should use something like isCurrent ? '3px solid #00416d' : 0 for borderBottom prop, which gives either string or number, both acceptable for CSSProperties.

Full example:

<span style={{
  backgroundColor: backgroundColor,
  color: color,
    marginRight: 3,
    borderRadius: 4,
    borderRight: 0,
    borderLeft: 0,
    borderTop: 0,
    borderBottom: isCurrent ? '3px solid #00416d' : 0
}}>{Symbol}</span>