如何定义 css 变量的样式属性在反应和类型脚本

我想这样定义 jsx:

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

在 CSS 中使用—— length，也有单元格具有—— count，它使用 CSS 伪选择器(使用 counter hack)显示 count。

但是打印错误:

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 变量(自定义属性) ，或者是否有方法强制任何样式对象？

89398 次浏览
小开
最佳答案

如果你去 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
*/
}

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

小开

像这样:

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

或者没有额外的 style变量:

function Component() {
return <div style=\{\{ "--my-css-var": 10 } as React.CSSProperties} />
}
小开

可以向变量.也就是说。 {['--css-variable' as any]: value }添加类型断言

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

将 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
}
/>
);
};
小开 
import "react";


type CustomProp = { [key in `--${string}`]: string };
declare module "react" {
export interface CSSProperties extends CustomProp {}
}

把它放到 global.d.ts 文件中

小开

您可以简单地将此模块声明 merge 使用字符串模板放在文件的顶部或放在任何。文件，那么您将能够使用任何 CSS 变量，只要它以“——”开头，即字符串或数字

import 'react';


declare module 'react' {
interface CSSProperties {
[key: `--${string}`]: string | number
}
}

比如说

<div style=\{\{ "--value": percentage }} />
小开

我想添加一个不同的方法通过使用 document.body.style.setProperty，也许如果你的 css 变量将受到某些道具的影响，你可以把它放在 useEffect像这样:

useEffect(() => {
document.body.style.setProperty(
"--image-width-portrait",
`${windowSize.width - 20}px`
);
}, [windowSize])

稍后在你的 css 文件中你可以这样称呼它:

width: var(--image-width-portrait);
小开

尝试:

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

提交答案