Type for style attribute passed to function
ReactjsTypescriptReactjs Problem Overview
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.
Reactjs Solutions
Solution 1 - Reactjs
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.
Solution 2 - Reactjs
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
.
Solution 3 - Reactjs
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