How to define a constrained TS type for css prop so only picked css properties can be interpolated?

[iam-yan]

For example, to achieve the following result:

// This is considered as valid
css = {{
   color: 'white',
   "&:hover": {
      color: 'black',
   }
}}
// This is not
css = {{
   color: 'white',
   height: 32, // Height should be excluded
   "&:hover": {
      color: 'black',
      border: 2, // Border should be excluded
   }
}}

[Andarist]

You'd have to wrap our module with your own and define its JSX namespace on your own (optionally by extending ours). That way TS would just pick your definitions, while the runtime code for your module would just reexport @emotion/react.

[iam-yan]

Hey @Andarist , thanks for your reply. I see. I'm wondering if there is any utility type I can use to define a component prop like this:

type ComponentProps = {
   constrainedCSS: UtilityType<'color' | 'border'>
}

<Component constrainedCSS={{
      color: 'pink',
      "&>div": {
         color: 'black',
         border: 3,
      }
   }}
 />