extending react style prop with typescript

Question

What is the best way to extend the style prop in react to accept css variables as keys?

<button style={{ "--color": "red", ...props.style }} />

C Sinclair · Accepted Answer · 2022-07-29 22:31:21Z

4

You'll need to add to the CSSProperties interface, which can be done pretty easily like so

declare module "react" {
  interface CSSProperties {
    /**
     * Add your custom properties here
     */
    "--x": string | number;
  }
}

answered Jul 29, 2022 at 22:31

C Sinclair

1866 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sleighty Aug 31 at 19:55

I get random erros when I do this, like TS complaining a props type that extends HTMLProps<'div'> not having a member called className. Ever seen something like that?

Kanishk Anand · Accepted Answer · 2021-12-21 08:00:16Z

1

You can do the following:

 render() {
   var style = {  "--color": "red", ...props.style } as React.CSSProperties;
   return (<button style={style} />);
  }

More in React.CSSProperties type definition: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/8871b1e8938a1ed698ec8a88c77ee169294e45d4/types/react/index.d.ts#L974-L983

answered Dec 21, 2021 at 8:00

Kanishk Anand

1,7121 gold badge9 silver badges17 bronze badges

Collectives™ on Stack Overflow

extending react style prop with typescript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related