How to inject the style of Vue components into the iframe. (for both standard components and async compoents)
I'm making an vue app which is a html5 widget load with js.
In my app, most of js and css are using in iframes, and they rely on the parent window's objects.
Unlike most iframe apps, It dose not load with an url but is made by vue components (just like this forum thread https://forum.vuejs.org/t/render-inside-iframe/6419)
I'm using some workarounds such as cssinjs, inject raw css into iframe within js logic. It should split styles to a single out of .vue file in my way.
Is there a proper way to to that?
Some relates:
https://github.com/webpack-contrib/style-loader/pull/146
https://forum.vuejs.org/t/render-inside-iframe/6419
Related
Just recently I have begun working with React, and to some extent front-end development. I am using the Material UI framework to develop an application, and I have chosen to use its "styling with JavaScript" approach: styles are defined as JavaScript objects, rather than traditional CSS, for example. All good so far.
I have my components in a component directory, and in a separate directory called style I have a matching file for each component where I define the useStyle hook (per component). That way, each component's style is defined via a unique import.
Now that I am integrating a non-Material UI third party library, the styling it ships with is defined with CSS, so I can just import the CSS file in my React component file to use the styling. But now I end up with a mixture of styling techniques.
Is there a single, consistent, and recommended approach for styling React applications? Is using multiple styling techniques recommended?
We have recently switched to a React SPA site. From the old site, we have some documents (invoices, quotes) that we generate as HTML files that we then print as PDFs. These templates are designed by a third party and have their own separate CSS files that have nothing to do with our React SPA's CSS. After the shift to React, I added some of the templates as React-friendly modules and converted their CSS to JSS. It worked but only partially as a lot of styles are overridden by the React SPA's CSS so the results are not consistent. We don't have the resources to redo all templates from scratch and this isn't something that we should be doing anyway - ideally, we want to be able to just load in the CSS that we get from the designer and only play around with the HTML/JSX (happy to use a tool to convert CSS to JSS but no custom editing). Is there a way to somehow ignore/unload all app CSS when loading a specific page, and only use a specific CSS/JSS file (in our case makeStyles), then bring it back to normal when another page is viewed?
I am working on ReactJS app (with Webpack) for webshop. This app retrieves some shop config from backend (as JSON object). This config contains customCss property that should override css of my webshop app. I am using css modules, but i think it is not easy to override css this way, so my question is what would be the bast way to handle css in my app, and override css with this property in the runtime?
React: css is Js
this the great idea you can go throw it for more guidance
https://speakerdeck.com/vjeux/react-css-in-js
I currently use _document.js to inject css into my Next.js app and I would like to start using _app.js to help inject data into pages.
Was wondering if it possible to use _document and _app in tandem or should we only use one or the other?
Short answer: Yes, You can use both. They serve different purpose and can be used in the same application.
According to NextJS docs:
Next.js uses the App component to initialize pages.
To override, create the ./pages/_app.js file and override the App class
and
Pages in Next.js skip the definition of the surrounding document's markup. For example, you never include <html>, <body>, etc. To override that default behavior, you must create a file at ./pages/_document.js, where you can extend the Document class.
Note: _document.js is only rendered on the server side and not on the client side. so event handlers like onClick is not going to work.
I have a React project that is using CSS modules (for components) + React-Bootstrap with CDN-hosted CSS.
I have a requirement that when my app loads (per user), I make a call to an endpoint to get a dynamic style guide.
For simplicity, it would be something like this:
{
"color_background": "#edeae3",
"color_error": "#9e2d2d",
"color_highlight": "#69b5ce",
"color_success": "#498e49",
}
The app should then be rendered in those colors. I know there is the ability to customize static Bootstrap styling (e.g. http://getbootstrap.com/customize/), but I'm not sure how to do it dynamically.
Any guidance would be appreciated.