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?

Thanks,

Scott

meshileya

@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

argelius

@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'

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Styling Onsen React Components