NextJS TypeScript和Fluent UI中的控制台错误

bttbmeg0  于 2023-06-22  发布在  TypeScript
关注(0)|答案(1)|浏览(154)

我正在使用NextJS,TypeScript和Fluent UI。我使用yarn create next-app --typescript生成了应用程序。
后来我使用$ yarn add @fluentui/react命令添加了Fluent UI。
我没有添加其他东西。我正在使用Fluent UI指南(https://developer.microsoft.com/en-us/fluentui#/controls/web/button)。
这就是我的index.tsx文件的样子:

import { DefaultButton, PrimaryButton } from "@fluentui/react";

export default function Home() {
  function buttonClicked() {
    alert("Clicked");
  }
  return (
    <div>
      <DefaultButton
        text="Standard"
        onClick={buttonClicked}
        allowDisabledFocus
      />
      <PrimaryButton text="Primary" onClick={buttonClicked} />
    </div>
  );
}

我使用$ yarn dev命令运行应用程序。
当我使用http://localhost:3000/在浏览器中打开应用程序时,它显示按钮,但在控制台中给出以下错误.

这是什么原因呢?我错过了什么吗?有人能帮忙吗?

628mspwn

628mspwn1#

在your_document. tsx中的document函数之前添加此内容。

import { setRTL } from '@fluentui/react/lib/Utilities'
setRTL(true)

取决于是否在html元素上指定了dir属性(dir ="rtl"将反转所有内容),所有组件都可以在LTR或RTL中呈现。如果您无法控制html元素的呈现方式,也可以使用setRTL API。

相关问题