如何在 ReScript 中使用 JavaScript Material 设计库？

Question

我正在尝试在 Rescript/React 应用程序中使用 material-ui library。下面的代码将显示一个按钮：

@module("@material-ui/core/Button") external button: string = "default"

@react.component
let make = () => {
     <button > {React.string("Hello")} </button>
}

显示的按钮是基本按钮，我无法更改 variant="contained" 或 color="primary" 等基本属性，因为无法识别它们。我试图将第一行中的 string 类型更改为 TypeScript @material-ui/core/Button 文件中的类型，但没有成功。我尝试使用 %%raw() 和 %raw()，但它们非常有限。我无法使用他们 returned 的对象，因为 ReScript 不知道它们的类型。另外，我无法在 make 函数中使用 %raw() 调用 React.useEffect()（因为它没有 return 任何东西）。

在 TypeScript 中，我可以在没有类型信息的情况下使用对象和调用函数。

有没有办法在 ReScript 中做同样的事情，或者我是否必须自己添加所有键入信息（如果我想使用库）？

Answer 1

您不能像我们在打字稿中那样直接使用库。 Rescript 有一个非常强大的类型系统，没有 any 类型。

您可以使用这个库 https://www.npmjs.com/package/@jsiebern/bs-material-ui for Rescript material ui bindings. You can check for bindings or rescript libraries here。只有在没有绑定可用的情况下，您才可能需要编写它。

Answer 2

绑定签名不正确。试试这个：

module Button = {
  @module("@material-ui/core/Button") @react.component
  external make: (~variant=option<[ | #outline | #contained ]>=?, ~children) => React.element = "default"
}


@react.component
let make = () => {
     <Button variant=#outline> {React.string("Hello")} </Button>
}

Answer 3

Here 您可以找到 material-ui 的绑定。 Here 你可以找到 github repo

rescript-material-ui provides ReScript bindings for the Javascript based UI library MUI (formerly MaterialUi).

The bindings are automatically generated by utilizing the documentation generation scripts of the original package. These rely on a mix of code & code annotations and are not always 100% accurate.

This will directly translate into the bindings. If you come across a missing prop on a component or a misbehaving component, please feel free to open an issue.

如何在 ReScript 中使用 JavaScript Material 设计库？

How to use a JavaScript Material Design library in ReScript?

javascript

reactjs

material-ui

reason

rescript