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

Question

我是 primereact 的新手。我想要一个像 material-ui.

这样的自定义工具栏

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

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

Answer 1

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

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; 
}

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

How to customize toolbar in primereact?

reactjs

primereact