Flow: CSSProperties not defined on React

Created on 26 Oct 2017  路  2Comments  路  Source: facebook/flow

Coming from typescript here and I know over there I can do stuff like this

// @flow

import React, { Component } from 'react';

export class SharedStyles {
  static flexParent: React.CSSProperties = {
     padding: '0 0 0 0'
  }
}

In flow I get the following error

Error: src/shared/components/blah.js:4
  4: import React, { Component, CSSProperties} from 'react';
                                ^^^^^^^^^^^^^ Named import from module `react`. This module has no named export called `CSSProperties`.

This also happens on the website
https://flow.org/try/#0PTAEAEDMBsHsHcBQiCWBbADrATgF1AEoCmAhgMa4A0oA3qAMKyawB2RL+AvqJNk6AHJspCgIDcyIgA8seUGWgkAzktABlABYlhAEzW4AntCKqaiUKCW4SuFGR7GpABW3tcALkIjcAOnpq1Jz4MIjwUE1AAXlpkC05ETiA

So is React.CSSProperties through flow not supported? Is there a way to add it so that developers are prevented from writing css properties that don't exist?

Most helpful comment

I think React.CSSProperties is a typescript specific interface, it's not something that actually exists in react itself.

I think the closest you can get to it is $Shape<CSSStyleDeclaration> (doesn't work in playground though), but it's not perfect. You can find its definition here.

All 2 comments

I think React.CSSProperties is a typescript specific interface, it's not something that actually exists in react itself.

I think the closest you can get to it is $Shape<CSSStyleDeclaration> (doesn't work in playground though), but it's not perfect. You can find its definition here.

You're right, I think VS Code suggested that for me. When I use $Shape flow does now seemingly break where I expect it to. The downside is that the flow plugin in VS Code doesn't provide correct typing information. Which means I gained something and lost something else. There has to be a solution where I get both...

Was this page helpful?
0 / 5 - 0 ratings