Question

我想这样定义jsx：

<table style={{'--length': array.lenght}}>
   <tbody>
      <tr>{array}</tr>
   </tbody>
</table>

并且我在CSS中使用--length，也有一些单元格具有--count，它们使用css伪选择器（使用Counter hack）显示计数。

但是打字稿显示错误：

TS2326: Types of property 'style' are incompatible.
  Type '{ '--length': number; }' is not assignable to type 'CSSProperties'.
    Object literal may only specify known properties, and ''--length'' does not exist in type 'CSSProperties'.

是否可以更改样式属性的类型以接受css变量（自定义属性），或者是否可以对样式对象强制执行任何操作？

Answer 1

将 style 强制转换为 any 违背了使用 TypeScript 的全部目的，因此我建议使用您的自定义属性集扩展 React.CSSProperties：

import React, {CSSProperties} from 'react';

export interface MyCustomCSS extends CSSProperties {
  '--length': number;
}

通过扩展 React.CSSProperties，您将使 TypeScript 的属性检查保持活动状态，并且您将被允许使用您的自定义 --length 属性。

使用 MyCustomCSS 看起来像这样：

const MyComponent: React.FC = (): JSX.Element => {
  return (
    <input
      style={
        {
          '--length': 300,
        } as MyCustomCSS
      }
    />
  );
};

Answer 2

赞：

render(){
  var style = { "--my-css-var": 10 } as React.CSSProperties;
  return <div style={style}>...</div>
}

Answer 3

如果您转到definition of CSSProperties，则会看到：

export interface CSSProperties extends CSS.Properties<string | number> {
    /**
     * The index signature was removed to enable closed typing for style
     * using CSSType. You're able to use type assertion or module augmentation
     * to add properties or an index signature of your own.
     *
     * For examples and more information, visit:
     * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
     */
}

该链接提供了如何通过增加Properties中的csstype的定义或将属性名称转换为any来解决类型错误的示例。

Answer 4

您可以在变量中添加类型断言。即 {['--css-variable' as any]: value }

<table style={{['--length' as any]: array.lenght}}>
   <tbody>
      <tr>{array}</tr>
   </tbody>
</table>

如何在React和TypeScript的style属性中定义CSS变量

4 个答案: