How to customize toolbar in primereact?

Question

I am new to primereact. I wanted a custom toolbar like in material-ui.

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

But primereact's toolbar isn't accepting children. Any way to fix?

Answer 1

Based on PrimeReact's Documentation, Toolbar provides left and right templates to place content at these sections. But if you would like to achieve a Toolbar same as material-ui you should do something like this:

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

But after rendering the component, seems it doesn't the thing you would like to achieve and its in the consequence of toolbar style. Thus for changing style of toolbar you need to add this styles:

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