[f7-vue] Theme-based rendering inside designated container

Me and my team would like to know if there’s any way to render a component stylized either for iOS/MD/Aurora, ignoring the app theme.
Let me explain.
Suppose i have the app set to use the MD theme globally.
I would like to to use some of the iOS-stylized components inside my app, for example the iOS dialog or the iOS toggle, which are aesthetically completely different from the MD versions.

It would be cool if i could render JUST those components in the iOS style.
Is it possible?

Have a wonderful day

For javascript components like dialog, from the docs I assume you can dynamically add CSS theme class, .md or .ios, this way:

  cssClass: 'ios'

For html elements like buttons you can just add those classes in the element itself.

Hi, thanks for the reply.
I tried just by adding the class and it partially works… by partially i mean it renders the component differently, but they are broken. Here’s the code:

    <f7-block strong>
      no class <f7-toggle ></f7-toggle>
      no class, checked <f7-toggle checked ></f7-toggle>
      ios class <f7-toggle class='ios'></f7-toggle>
      ios class, checked <f7-toggle checked class='ios'></f7-toggle>
      aurora class <f7-toggle class='aurora'></f7-toggle>
      aurora class, checked <f7-toggle checked class='aurora'></f7-toggle>

And here’s the result:

For a quick comparison, here are the expected results (obviously the colors are not important, just the shapes are):

No, it is not really possible because it depends on the order of such styles declaration. So just add custom styles (in custom CSS) overwriting default ones like you need

Oh ok thanks for the info!