How to override CSS



  • 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.



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


  • Onsen UI

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



  • 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.



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

Log in to reply