标签: carbon-design-system

我正在尝试将Carbon Design System - React SDK集成 到 Fable/Elmish 应用程序中，看起来我必须为每个组件创建属性类型定义（其中一些我只是猜测）才能使用它。

该组件已包含 TypeScript 定义。

我真的必须为我想尝试或使用的每个 React 组件手动创建类型定义吗？

是否有一种简单或自动的方法可以从 F# 代码中使用 React 组件，而不必为我想尝试的每个组件编写属性类型定义？

F# 社区中的人们如何使用 React 生态系统中的组件？

我试过ts2fable但它生成无效的不可靠代码：大多数行都有错误的示例，我还转换了依赖项（typings/shared.d.ts和 React 类型定义）

我也在看TypeProviders但不确定这是否可以解决我的问题。

新手在这里反应一下。

TLDR：我有一个名为的辅助函数，createNotification调用该函数时会使用 render() 将<ToastNotification />组件插入到container元素中。如果我使用 createPortal() 则不会附加任何内容。如果我使用渲染，尽管有多个触发器，但该组件仅添加一次。

谁能帮我弄清楚发生了什么事吗？

谢谢

助手.js

import { ToastNotification } from "carbon-components-react";
import { render, createPortal } from "react-dom";

export const createNotification = () => {
  const container = document.getElementById("notificationContainer");
  console.log(container); //just to check function is running and has found container
  return render(<ToastNotification />, container); //works but only once, not on multiple triggers
  return createPortal(<ToastNotification />, container); //doesn't render anything in container
};

上面的函数是根据需要从其他组件调用的：

登录.js

import { createNotification } from …

我想在 Carbon 设计系统中使用深色主题 g90。\n我可以通过导入这些来获得默认的白色主题：

<style lang="scss" global>\n  @use "@carbon/themes";\n  @include themes.set(themes.$g90);\n\n  @import 'carbon-components/scss/globals/scss/_css--reset.scss';\n  @import 'carbon-components/scss/globals/scss/_css--font-face.scss';\n  @import 'carbon-components/scss/globals/scss/_css--helpers.scss';\n  @import 'carbon-components/scss/globals/scss/_css--body.scss';\n\n  @import 'carbon-components/scss/globals/grid/_grid.scss';\n\n  @import 'carbon-components/scss/components/button/button';\n\n</style>\n

但是，我在编译时遇到错误。

[!] (plugin svelte) Error: Undefined mixin.\n  \xe2\x95\xb7\n3 \xe2\x94\x82     @include themes.set(themes.$g90);\n  \xe2\x94\x82     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n  src/App.svelte 3:2  root stylesheet\n

我唯一改变的svelte/template是

  plugins: [\n    svelte({\n      preprocess: [\n        autoPreprocess({\n          postcss: true,\n          scss: { includePaths: ["src", "node_modules"] },\n        }), \n

我已经尝试了几个小时，但缺少一些东西。