Please consider this typescript function
function button(style: any, func: ()=>void, img: string) {
return (
<button
className="Reader_Button"
style={style}
onClick={func}
>
<img src={img} alt="" />
Back
</button>
);
}
What is the correct type for the first argument style? I feel like it should be something like HTMLElementStyle but I can't find the right incantation.
Sorry, I wasn't sufficiently clear. I want to know what type to use to replace the "any" in style: any. The typescript definitions handle checking the types of the supplied members of the object.
I'm talking about definition of the function, not application.
The type is React.CSSProperties. You can find this in VSCode by writing <div
style={{}}> and pressing F12 when having your cursor in the style attribute.
The style prop on regular DOM elements should be in the form of an object where the keys are the css attributes.
Example:
<div style={{ width: "100%", backgroundColor: "black" }} />
Notice that in the case of attributes containing dashes, they become camel cased. For instance background-color becomes backgroundColor.
for me work "import CSS from csstype" && wrap to quotes 'maxHeight': '120px'
import React from 'react';
import CSS from 'csstype';
const shortList = () => {
const listStylus: CSS.Properties = {
'maxHeight': '120px',
'overflow': 'hidden',
}
return (
<div>
<ul style={listStylus} >
<li>Item element 1</li>
<li>Item element 2</li>
</ul>
</div>
)
}
export default shortList