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

mitya33

@Fran-Diox How can you edit a theme if one is using Onsen via CND? I therefore have no folders like those you mention.

Fran Diox

@mitya33 Either override the CSS styles that you need in your app with custom CSS or generate a local onsen-css-components.css with the mentioned tool and include it in your project.

Cipher7

@Fran-Diox are these instructions still valid? I’ve tried making changes in theme.css but it does not reflect in my app?

:root {
–background-color: #f9f9f9;
–material-background-color: #ffffff;
–text-color: #1f1f21;
–sub-text-color: #999;
–highlight-color: rgba(24, 103, 194, 0.81);
–second-highlight-color: #25a6d9;
–border-color: #ccc;
–toolbar-background-color: #eee;
–toolbar-button-color: rgba(38, 100, 171, 0.81);

Fran Diox

@Cipher7 Did you do the second step?

You can use the Gulp file provided in onsenui/css-components-src to generate a a new onsen-css-components.css file

It should be gulp build, and gulp serve for preview. You need to run npm install before, of course.