在Typescript中使用自定义JSX编译指示的DOM元素动态道具

编程问答 2022-06-10

问题描述

使用自定义JSX编译指示时是否可以扩展DOM元素属性？

类似于情感和样式组件如何使用css道具并在其jsx编译指示内管理逻辑。我想做同样的事情，但是具有可以通过通用类型配置的属性？

例如，

// @jsx jsx

import { jsx } from 'my-lib';

...

<button<{ primary: boolean }> css={styles} primary={primary}>
  Hello world
</button>

我当前的类型定义看起来像这样：

interface CustomAttributes {
    css?: CSSProperties;
}


declare module 'react' {
    interface DOMAttributes extends CustomAttributes {}
}

declare global {
    namespace JSX {
        interface IntrinsicAttributes extends CustomAttributes {}
    }
}

我的幼稚解决方案看起来像这样：

interface CustomAttributes {
    css?: CSSProperties;
}


declare module 'react' {
    interface DOMAttributes<DynamicProps> extends CustomAttributes,DynamicProps {}
}

declare global {
    namespace JSX {
        interface IntrinsicAttributes<DynamicProps> extends CustomAttributes,DynamicProps {}
    }
}

相关问题： Styled components's 'css' prop with TypeScript

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-in-jsjsxjsxreactjsreactjstypescripttypescript