传递给函数的样式属性的类型

请考虑这个打印函数

 function button(style: any, func: ()=>void, img: string) {
return (
<button
className="Reader_Button"
style={style}
onClick={func}
>
<img src={img} alt="" />
Back
</button>
);
}

第一个参数 style的正确类型是什么？我觉得应该是类似 HTMLElementStyle 的东西，但我找不到正确的咒语。

抱歉，我没说清楚。我想知道使用什么类型来替换 style: any中的“ any”。类型脚本定义处理对象提供的成员的类型检查。

我说的是函数的定义，不是应用程序。

80051 次浏览

小开

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.

React style documentation

小开

最佳答案

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.

小开

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

小开

CSSStyleDeclaration It becomes available as soon as you have typescript in your project. There are some more but I think this is the one.