如何在primereact中自定义工具栏？

问题描述

我是 Primereact 的新手。我想要一个像 material-ui 一样的自定义工具栏。

<AppBar>
<Toolbar>
<h4> App Header </h4>
</Toolbar>
</AppBar>

但是 Primereact 的工具栏不接受儿童。有什么办法解决吗？

解决方法

基于 PrimeReact's Documentation，Toolbar 提供了 left 和 right 模板以在这些部分放置内容。但是，如果您想实现与 Toolbar 相同的 material-ui，您应该这样做：

import "./styles.css";
import { Toolbar } from "primereact/toolbar";
import "primereact/resources/themes/saga-blue/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";

export default function App() {
  return (
    <>
      <Toolbar left={<h4> App Header </h4>} />
    </>
  );
}

但是在渲染组件之后，它似乎不是您想要实现的，而是工具栏样式的结果。因此，要更改工具栏的样式，您需要添加以下样式：

.p-toolbar {
  position: fixed;
  left: auto;
  top: 0;
  right: 0;
  width: 100%;
  padding: 0 1rem !important; 
}