Monaca Onsen UI Discord Chat Github Repo

Styling Onsen React Components

  • Hey there. I just started playing around with Onsen UI 2 with React. I’m trying to take an app that I wrote in React and Material-UI and move it over to Onsen, but I’m having trouble understanding how we style the components.

    The documentation mentions a prop called “modifier” but the only example of it’s use that I could find set it to “material” which is already defined in the CSS that is included in Onsen.

    Is there an example somewhere that shows how I would, for example, set a toolbar to a custom color? Or the background of a page to a custom color?



  • @sherscher

    .navigation-bar {
      background-color: #f00;
      height: 50px;
    ons-toolbar ~ .page__content {
      top: 50px;

    if you want to give your tool bar a background color, and if you also want to edit the height of your toolbar

  • @sherscher If you want to change the colors of the components you can compile the stylus files manually (they are included in the bundle).

    If you ware using Webpack you can do:

    $background-color = #f9f9f9
    $material-background-color = #ffffff
    $text-color = #1f1f21
    $sub-text-color = #999
    $highlight-color = #13bde2
    $second-highlight-color = #25a6d9
    $border-color = #ccc
    $toolbar-background-color = #13bde2
    @import 'onsenui/stylus/components'