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

【问题标题】：Type for style attribute passed to function传递给函数的样式属性的类型
【发布时间】：2017-12-14 15:27:40
【问题描述】：

请考虑这个打字稿功能

 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”。打字稿定义处理检查提供的对象成员的类型。

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

【问题讨论】：

你试过“width=100px, font-size: 12px;”吗？或者是否可以将这些论点放在外面。
ReactJS 样式属性只是映射，不是吗？
style 需要一个键值对象。类似：{color: "red"}。所以它完全变成style={{color: "red"}}。请注意，带有破折号的 css 属性在 React 中是驼峰式的。所以font-size 将改为fontSize。
见我上面的编辑。我知道如何使用该功能。我想知道如何正确声明它，以便它检查其参数的类型，就像 typescript 对 style 属性所做的那样。

标签： reactjs typescript

【解决方案1】：

类型是React.CSSProperties。您可以在 VSCode 中通过编写 <div style={{}}> 并在将光标置于 style 属性时按 F12 来找到它。

【讨论】：

谢谢。不过，肯定还有更多。如果我声明该参数的类型为 React.CSSProperties，那么我会抱怨尝试将 {width: em(4), height: em(4),fontSize: em(0.75),alignSelf: 'flex-end'} 之类的对象分配给它。但是我没有得到直接将相同对象提供给节点上的 style={} 属性的错误。他们以某种方式使样式属性更容易接受。
@GaryBishop 你到底收到了什么投诉？
考虑这个larger segment of the code。如果我将第 36 行的 bstyle 声明更改为 bstyle: React.CSSProperties，我会收到类似 here 所示的错误。我不明白为什么 div 样式属性可以接受该对象，但我的 CSSProperties 参数不能。顺便说一句，我知道奇怪的“中心”作为“中心”修复，但为什么不总是需要它？
@GaryBishop 看来你有一个旧版本的 @types/react 包。请尝试升级它。另外，源码中有一条说明接口不完整：github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/…
升级没有帮助。令我惊讶的是，它不会抱怨 div 上的样式分配，而是使用具有相同明显声明的函数。我对变量有同样的问题。我错过了一些东西。

【解决方案2】：

常规 DOM 元素上的样式属性应该是对象的形式，其中键是 css 属性。

示例： <div style={{ width: "100%", backgroundColor: "black" }} />

请注意，对于包含破折号的属性，它们会变成驼峰式。例如background-color 变为backgroundColor。

React style documentation

【讨论】：

见我上面的澄清。我知道怎么称呼它。我正在寻找有关如何声明它的信息，以便它像 style 属性一样检查类型。

【解决方案3】：

对我来说工作“从 csstype 导入 CSS”&& 换行到引号 '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

【讨论】：

你应该澄清一下csstype包也需要安装npmjs.com/package/csstype