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


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


  • Onsen UI

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



  • @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);


  • Onsen UI

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


Log in to reply