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.
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.
-
@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 inonsenui/css-components-src
to generate a a newonsen-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.
-
@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);
-
@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
, andgulp serve
for preview. You need to runnpm install
before, of course.