如何在 ReScript 中使用 JavaScript Material Design 库？答案

【问题标题】：How to use a JavaScript Material Design library in ReScript?如何在 ReScript 中使用 JavaScript Material Design 库？
【发布时间】：2021-12-08 22:32:57
【问题描述】：

我正在尝试在 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()，但它们非常有限。我无法使用它们返回的对象，因为 ReScript 不知道它们的类型。此外，我无法在make 函数中使用%raw()（因为它不返回任何内容）调用React.useEffect()。

在 TypeScript 中，我可以使用对象和调用函数，而无需了解它们的类型信息。

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

【问题讨论】：

标签： javascript reactjs material-ui reason rescript

【解决方案1】：

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

您可以使用此库https://www.npmjs.com/package/@jsiebern/bs-material-ui 进行 Rescript 材质 ui 绑定。您可以检查绑定或重写库here。只有当没有可用的绑定时，您才可能需要编写它。

【讨论】：

【解决方案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>
}

【讨论】：

它不起作用："@rescript/react": "0.10.3", "bs-platform": "9.0.2" 语法错误！ 3 │ external make: (~variant=option=?, ~children) => React.element = "default" 你忘了:这里（代替第一个= )?它标志着一个类型的开始

【解决方案3】：

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

rescript-material-ui 为基于 Javascript 的 UI 库 MUI（以前称为 MaterialUi）提供 ReScript 绑定。

绑定是通过使用原始包的文档生成脚本自动生成的。这些依赖于代码和代码注释的混合，并不总是 100% 准确。

这将直接转化为绑定。如果您在某个组件上遇到缺失的 prop 或行为不端的组件，请随时提出问题。

【讨论】：