How to override CSS

ephraimt

Can someone please explain simply and precisely how to override the CSS in my Monaca / React / Onsen project?

I want to be able to write CSS that will be inserted AFTER the existing CSS so that I can make specific changes to specific Onsen components.

munsterlander

@ephraimt Have you tried using !important? That always works for me.

Fran Diox

@ephraimt If you want to change the color theme, you can find the source files under onsenui/css-components-src/src/theme.css (version +2.2.0). You can use the Gulp file provided in onsenui/css-components-src to generate a a new onsen-css-components.css file. Otherwise, we will publish some online tools for checking CSS classes soon but until then, just check the DOM and modify whatever you want.

ephraimt

Thank you for the suggestions.

I would like to know how I can add a reference to my own .CSS file in index.html, such that it will appear after the other .CSS links in <head>.

When I add a link at the end of the head of src/public/index.html.ejs, it always gets output BEFORE the app.css link in the generated index.html file, so app.css is last like this:

… <link href=custom.css rel=stylesheet> <link href=app.css rel=stylesheet></head>

How can I insert a CSS link after app.css?

Thank you.

ephraimt

OK, I figured out the answer to my question.

The solution is to require your custom css file in main.jsx. The file should be located relative to the src/ directory.

// src/main.jsx

require( "./override.css" );

// src/override.css

.tabbar--material__button .tabbar__label {
    font-size: 14px;
    font-weight: bold;
    font-family: roboto, sans-serif;
}

How to override CSS browsing