Skip to content

[labs/react] createComponent React component style property typescript problem #3021

Closed
@oisinlavery

Description

@oisinlavery

Description

Overriding the style property on a wrapped component (using createComponent) results in a typescript error.
The error expects all style properties to be set.

Steps to Reproduce

WrappedWebComponent.ts

import { Slider } from "@material/mwc-slider/slider.js";
import { createComponent } from "@lit-labs/react";
import React from "react";

const Component = createComponent(React, "mwc-slider", Slider, {
  oninput: "input",
});

export default Component;

Using component in App.tsx

<WrappedWebComponent
  style={{
    background: "red",
  }}
/>

Typescript Error:

(property) style?: (CSSStyleDeclaration & React.CSSProperties) | undefined
Type '{ background: string; }' is not assignable to type 'CSSStyleDeclaration & CSSProperties'.
  Type '{ background: string; }' is missing the following properties from type 'CSSStyleDeclaration': accentColor, alignContent, alignItems, alignSelf, and 450 more.ts(2322)

Expected Results

Allow overriding of style property

Actual Results

Typescript error, expecting all css properties to be set

  • Vscode
  • Create React App

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

✅ Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions