Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
oisinlavery opened this issue Jun 10, 2022 · 1 comment
Assignees

Comments

@oisinlavery
Copy link

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
@oisinlavery oisinlavery changed the title [labs/react] [labs/react] createComponent React component style property typescript problem Jun 10, 2022
indigostar-kr pushed a commit to indigostar-kr/lit that referenced this issue Jun 16, 2022
indigostar-kr pushed a commit to indigostar-kr/lit that referenced this issue Jun 16, 2022
indigostar-kr pushed a commit to indigostar-kr/lit that referenced this issue Jun 16, 2022
indigostar-kr pushed a commit to indigostar-kr/lit that referenced this issue Jun 16, 2022
indigostar-kr pushed a commit to indigostar-kr/lit that referenced this issue Jun 16, 2022
indigostar-kr added a commit to indigostar-kr/lit that referenced this issue Jun 16, 2022
@taylor-vann taylor-vann self-assigned this Jun 21, 2022
@taylor-vann
Copy link
Contributor

This issue should be resolved with #3072

:) curious if that can be confirmed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment