How to import html style attribute in a reusable component with typescript?

Question

hello guys, I want to create a reusable button component. OnClick attribute implementation successfully. But style property not working. How can I make the style feature work like in HTML? What should I write in line 8?

As you can see, ı just wanna MyComponent's style property to work like HTML style property.

Thanks for your help!

Answer 1

Like this:

interface IButtonProps {
    color?: string;
    fontSize?: string | number;
    children?: React.ReactNode;
    onClick?: React.MouseEventHandler<HTMLElement>;
    style?: React.CSSProperties;
}

You tried to copy the attribute declaration itself from the IDE tooltip. The notation is a bit confusing when you hover over the style attribute of a jsx element, but what follows after the : is the type notation.