EXTJS-applying a different theme to a specific component? - extjs

we use the ExtJS "gray" theme in our app, is there a way i can use the "Accessibility" theme for a specific component? a window which includes a very basic form
thanks

The extjs theme is applied using CSS style sheets on certain html element types with certain classes. Once you load a second theme css into the same page, the first theme is overwritten completely.
So it is not possible to mix them in a single app.
You would have to use two HTML pages, which load different style sheets, but same ext.js, and use two different browser windows or an iframe.

Related

Use own fonts in podlove/player-react

I have not been able to pass custom styling to the Podlove <episode-title> element. Is there a way to make custom fonts available in the player?
https://www.npmjs.com/package/#podlove/player-react
Styling the components is done by inline styles, but for some reason
font-family isn't applied.

Possible to inject material UI styles into iframe?

I'm using material UI 4.9.x and it doesn't seem possible to use MUI in an iframe with the global styles.
I'm trying to use a React portal to inject the content into the iframe.
THAT part works and my MUI context menu works properly, just has the wrong styles.
I'm trying to inject the styles via CssBaseline but that gets injected into the host window not the iframe window.
I've verified this by looking at the DOM and I can see the elements created there under and not in the iframe.
How would I go about injecting this, completely, into the iframe window.
One idea I had was to change the current / global document and window objects to represent the iframe but worried that might be too hacky.

Add a font face css in reactjs

fabricjs can change the font of a text in a canvas to a font family. For that the font needs to exist in the browser, either CSS or emb link.
I now want to add dynamically a font from a resource (google, self hosted ect) to the css populating it in the document via #font-face. I don't want to just list all fonts in the css beforehand because it can be a huge list. Is it possible to modify the running css in reactjs to add a font face to it?
Use CSS-in-JS solutions like emotion, styled component or radium

Dynamically import SASS files via React

I have to make interface suitable with two different color themes - light and dark. Color theme is being selected by user via button/switch/whatever.
The problem (as I think) is that my React application is being bundled via Webpack, so all my SASS-compiled styles is being embedded into the main HTML template as <style>...</style> (each style tag references to its SASS-file). I know, that I can assign some class name to app wrapper and then write nested style for every selector that needs to be recolorized. But it is not such productive as, for example, import necessary SASS file depending on what color theme was selected by user.
Is there any way to solve this problem in a better way?

Apply theme dynamically on Onsen UI

I'm working on a customizable application based on Onsen UI. I'd like to know if Onsen UI exposes a method (or if there is some way to hack around it) to set a theme dynamically, in the same way components.onsenui.io does for previewing a generated theme.
What I'd like to accomplish is that the user can select the theme colors for his own application. So i would need some way to set the ui colors using Javascript instead of downloading a static/generated theme.
Thanks
No, Onsen UI doesn't provide APIs to change theme dynamically.
Changing or editing the stylesheet programmatically is the way to do this.

Resources