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.