Home > Software design >  How can I use "--percentage" in Inline CSS in React-TypeScript?
How can I use "--percentage" in Inline CSS in React-TypeScript?

Time:12-06

I have a div with Inline-Style

<div className="HalfArc" style={{ "--percentage": "75%" }}>

and this works fine in my ReactJS project. It also works in my ReactTS project, but I get this TS2322-Error:

Type '{ "--percentage": string; }' is not assignable to type 'Properties<string | number, string & {}>'.
  Object literal may only specify known properties, and '"--percentage"' does not exist in type 'Properties<string | number, string & {}>'.

I tried setting the "" in different position, but I have no idea how to get the error away.

CodePudding user response:

cast the style object to React.CSSProperties

const style = { "--percentage": "75%"} as React.CSSProperties;
<div className="HalfArc" style={style}>
  • Related