Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Conditional array CSS prop type errors

See original GitHub issue

Describe the bug

The following code got TypeScript error. https://compiledcssinjs.com/docs/css-prop#conditional-rules

TS2322: Type 'false | { border: string; color: string; }' is not assignable to type 'string | number | void | CSSProps | AnyKeyCssProps<void>'.   Type 'boolean' is not assignable to type 'string | number | void | CSSProps | AnyKeyCssProps<void>'.

Expected behavior No errors.

Screenshots error

Desktop (please complete the following information):

OS: macOS BigSir 11.1
Browser Google Chrome
Version 87.0.4280.141（Official Build）（x86_64）

Develop Environment

TypeScript: 4.1.3
@compiled/react: 0.5.2

Issue Analytics

State:
Created 3 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

sonatardcommented, Jan 11, 2021

Update TypeScript and @compiled/react version. I’m preparing repository. Please just a moment.

0reactions

pgmanutdcommented, Jan 11, 2021

@sonatard: And ternary is not supported at the moment. Its already in the pipeline.

Otherwise something like this might worked:

isPrimary ? { color: 'red' } : undefined

Top Results From Across the Web

How to validate React props using PropTypes - LogRocket Blog

Learn how to validate props with React PropTypes, React's internal mechanism for adding type checking to component props.

Typechecking With PropTypes - React

To run typechecking on the props for a component, you can assign the special propTypes property: import PropTypes from 'prop-types'; class Greeting extends ......

Allow array as sx value to have conditional 'sub-classes' #29274

sx property should accept array as value. Each element is considered as normal style object and overrides previous element's properties in case ...

How to Use PropTypes in React - freeCodeCamp

PropTypes are simply a mechanism that ensures that the passed value is of the correct datatype. This makes sure that we don't receive...

Optional chaining (?.) - JavaScript - MDN Web Docs - Mozilla

The optional chaining ( ?. ) operator accesses an object's property or calls a function. If the object accessed or function called is ......