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.

`style` prop type error

See original GitHub issue

If I just try to pass text area attributes (from React.InputHTMLAttributes) to TextareaAutosize there is a type error that height property of style does not match.

type Props = React.InputHTMLAttributes<HTMLTextAreaElement>;
const Component: React.FC<Props> = props => <TextareaAutosize {...props} />;

Here is the full error:

Type '{ accept?: string | undefined; alt?: string | undefined; autoComplete?: string | undefined; autoFocus?: boolean | undefined; capture?: string | boolean | undefined; checked?: boolean | undefined; ... 279 more ...; css?: InterpolationWithTheme<...>; }' is not assignable to type 'Pick<TextareaAutosizeProps, "style" | "autoComplete" | "autoFocus" | "disabled" | "form" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | ... 262 more ... | "wrap">'.
  Types of property 'style' are incompatible.
    Type 'CSSProperties | undefined' is not assignable to type '(CSSProperties & Pick<CSSProperties, "height" | "width" | "translate" | "color" 
| "clipPath" | "filter" | "marker" | "mask" | "alignContent" | ... 753 more ... | "vectorEffect"> & { ...; }) | undefined'.
      Type 'CSSProperties' is not assignable to type 'CSSProperties & Pick<CSSProperties, "height" | "width" | "translate" | "color" | "clipPath" | "filter" | "marker" | "mask" | "alignContent" | ... 753 more ... | "vectorEffect"> & { ...; }'.
        Type 'CSSProperties' is not assignable to type '{ height?: number | undefined; }'.
          Types of property 'height' are incompatible.
            Type 'string | number | undefined' is not assignable to type 'number | undefined'.
              Type 'string' is not assignable to type 'number | undefined'.  TS2322

I don’t feel like I should be getting an error there.

Issue Analytics

State:
Created 3 years ago
Comments:11 (6 by maintainers)

Top GitHub Comments

1reaction

Andaristcommented, Jun 3, 2020

Actually - I have gone in a slightly different direction. You can take a look at https://github.com/Andarist/react-textarea-autosize/commit/db872f035e8c033eb96c40eead9c041ec6b2e09f . I will probably release this over the weekend.

0reactions

Andaristcommented, Jun 4, 2020

Yes, I can. Thanks for the tip - this is even better. It seems that I have been using JSX.IntrinsicElements incorrectly all this time. TIL.

I’ve just prepared a change for this: https://github.com/Andarist/react-textarea-autosize/commit/61ca826a3fbe33abb9c67885d5bbd7b34ecd66db

Top Results From Across the Web

How to declare style in propTypes? - react native

With the forbid-prop-types rule enabled, eslint forbids me from using style: React.PropTypes.object , and using shape is suggested.

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 ......

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.

Wrong PropType for style props in 2.0.0 · Issue #2374 - GitHub

A simple fix would be to replace all occurrences of PropTypes.object for styles with PropTypes.oneOfType([PropTypes.object, PropTypes.array]) ...

react-style-proptype | Yarn - Package Manager

Validates style objects by ensuring the keys are valid css property names (in camelcase form). var stylePropType = require('react-style-proptype'); var Comp ...