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.
Reference on V.2rc React Components theming?
-
Hello,
I have just discovered Onsen UI and I would like to know about customization and theming provided react components. I don’t find reference/tutorial on the v2.rc about those topics, so here is my questions:
- How far we can customize existing components? I am looking for something more mutable than material-ui.
- Which css methodology does Onsen use? (I saw some BEM in the default style sheet)
- Does it use css-module or inline style or BEM namespace to avoid naming conflict?
- What is the workflow for theming?
- Is it compatible with JSS?
Thank you :)
-
@dagatsoin We use BEM to avoid name conflicts. You can build your own theme by customizing the Stylus files in the
css-components
directory. Just copy one of the existing themes and compile it with Stylus. Or you can override the current styles but that would create some superfluous rules.https://github.com/OnsenUI/OnsenUI/tree/master/css-components/components-src/stylus
You should be able to run the Stylus compiler on these files.
-
@argelius thx you very much.
-
for those who ask: here is a demo repo which works with JSS: https://github.com/dagatsoin/JSS-OnseUI-example
npm install -g monaca # Install Monaca CLI - Onsen UI toolkit monaca signup # Free sign up git clone git@github.com:dagatsoin/JSS-OnseUI-example.git cd JSS-OnseUI-example npm install monaca preview
-
@dagatsoin Looks very nice. I will definitely take a look at JSS