Zoom websdk is used to integrate the zoom video platform into your application.
Here is the package for the same #zoomus/websdk.
All things are working fine for that video UI you've to import this CSS in your file. But the issue with this whole application is affected with this CSS and your styling is disturbed when you import this line to the main file.
import "#zoomus/websdk/dist/css/bootstrap.css"
import "#zoomus/websdk/dist/css/react-select.css"
Check out zoom forum for the same.
To resolve this I do a little twist in that
First you've to create a separate component that contains a code for zoomsdk like getting the signature and init the zoom all of that stuff.
Don't import those zoom related CSS to the parent file instead of that will go with another method.
Here is the step you need to follow
Copy those css file from node_modules to public folder.
Install react-helmet or react-helmet-async
In the same component write this line of code
<Helmet>
<link type="text/css" rel="stylesheet" href="/zoom-bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/zoom-react-select.css" />
</Helmet>
One workaround can be to use React.lazy on its parent component.
I am using this temporarily until I find a complete solution to this.
import { ZoomMtg } from "#zoomus/websdk"; distors the ui for me. I am not importing the css. It does that automatically I think.
Related
I've imported some CSS files with
<style scoped>#import "../assets/XYZ.css";</style>
in different components. Now whenever I switch components the CSS from the other component is loading as well. Let's say I switch from Home.Vue to Blog.Vue, then Home.Vue's CSS file will be imported into Blog.Vue too. Whenever I refresh, everything seems to be fixed. Adding scoped doesn't seem to work for me.
I am using vue-router to switch between components.
This is my relevant code:
main.js
import './assets/main.css';
^ This is a css file to be used across my website on every component
Home.Vue
<style scoped>#import "../assets/home.css";</style>
Blog.Vue
<style scoped>#import "../assets/blog.css";</style>
In my Next 10 application, I can import global styles in _app.js like so
import 'assets/css/app.css'
I'd like to add a print stylesheet. I know I can use a #media print { } query to app.css, but ideally it would be loaded as a separate file so the download priority is lower, e.g.
<link rel="stylesheet" href="/assets/css/print.css" media="print">
Is this possible using Next.js? I can't see any obvious way to control how the actual <link> tag is rendered.
The only way I can see this might work is to have a custom bit of Webpack/file-loader configuration that matches print.css only, which feels... less than ideal.
I have the same question as you velvetkevorkian but with the intend to use the following technique:
<link rel="stylesheet" href="webfonts.css" media="print" onload="this.media='all'" />
This will indeed lower the priority in the loading queue, prevent rendering from being blocked and finally replace the native fonts by the webfonts.
UPDATE: not ideal but for my "simple" CSS file (which only defines font-face) here is what I did:
Move my webfonts.css file to the public folder
Manually add my <link> inside <Head>
Its possible, yes!
You can create Print.module.css in folder pages or anywhere, inside of this file you must use
#media print {
/* its an example */
.noPrint{
display: none;
}
}
Inside your file .js or .tsx you call this css like a
import print from './Print.module.css'
and call the className like:
className={print.noPrint}
if you have more stylesheets in your project you can differenciate like this:
import print from './Print.module.css'
import styles from './General.module.css'
and call the classes together, it goes like this:
className={`${styles.anyclass} ${print.anyclass}`}
this works too for responsive stylesheets, enough follow this logic with respectives media queries.
For background, I am trying to load SVG icons in my react app and am using the object tag so that I can manipulate the color of the icons easily.
In this guide, they say:
If you want to use external styles, which are mostly much easier to work with and maintain, you can’t use or background-image. If you are using you need to reference your stylesheet internally from the SVG file (see code following). Remember: if you do this the SVG will also not be able to know what its parent class is (i.e. the ) so don’t try to use that in its styling. Inline SVGs don’t need this added and therefore can be slightly easier to work with in this sense.
and provide this code example:
// Add to very start of SVG file before <svg>
<?xml-stylesheet type="text/css" href="style.css"?>
// In style.css
.firstb { fill: yellow; }
.secondb { fill: red; }
To give you an idea of how my files are organized, my src folder contains an assets folder along with my components folder. My style.scss file lives within the src folder as well.
I'm having trouble figuring out what to add to the top of my svg files. My understanding of sass is that it would usually compile style.scss to style.css, however, when I look at my sources in dev tools it shows that style.scss is being loaded directly. Is this just because I'm still in development mode?
Anyways, I've tried the following (none of which have worked):
<?xml-stylesheet type="text/css" href="./style.scss"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<?xml-stylesheet type="text/css" href="style.scss"?>
It would be a huge help if anyone knows how I can get this to work! Let me know if there's any other information I can provide. Thanks so much!
You are correct to assume that you'd need to compile style.scss to style.css, so first ensure that only the CSS is being referenced in the SVG. This is the most straightforward way to get this to work, but a better solution would be to import your styles once in your root HTML template instead.
Now, if you're using React it's likely that you're also using a bundler such as webpack. You can tell bundlers like webpack to handle non-JS imports such as Sass files by using loaders. There is a sass-loader for webpack that will allow you to import Sass files, however you may also need to add the svg-inline-loader so that you can import the SVG directly.
I think with both loaders, what will happen is that webpack will start bundling your React app, see that an SVG is imported, grab it and see that it is referencing a Sass file, grab the sass file and compile it, and then output the styles in your index.html file. Please let me know if this solution works for you!
I found a workaround. Not exactly what I was hoping for, but it works for me.
There's a react-svg package that handles an ajax request and pulls the svg in as a normal svg tag. This allows me to edit with my sass file.
https://www.npmjs.com/package/react-svg
By default, Angular 2 compiles the CSS into JavaScript, especially when using WebPack as in Angular-CLI. I would rather this not happen for a couple of reasons.
The first reason is that when I'm developing, I find it really helps to be able to see in the developer tools exactly what style sheet a specific style rule was coming from and what line number it was on. The second reason is that I think compiling CSS into the code kind of misses the point of good CSS, which is that you can apply a different style sheet and have an entirely different look and feel with the same markup.
Is there a flag somewhere that I can set to leave the CSS in .css files, where IMO it belongs?
This is the whole point of encapsulated components.
A component should have it's own styles encapsulated with it so it can be shipped with the styles.
Imagine you want to publish one of your components to be used by others, shouldn't it have its own styles with it ?
That means Angular needs a way to link those css to the component , thus seperates them into chunks and injects them into head tag.
To solve your problem though , you have couple of options :
1- Not using the Emulated Encapsulation :
Components by default have a property called encapsulation which is set to Emulated , you need to change it to None:
#Component({
encapsulation:ViewEncapsulation.None
})
Then , you can put all you css in the head tag your self like you'd do with a normal html page.
2- If the problem is theme ing , you can make your component themeable .
You can have a theme attribute for your component and then based on that change the styleing :
#Component({
selector:'my-component',
styles:[
`
:host{
[theme="blue"]{
change what ever you want :
h1{
color:blue;
}
}
}
`
]
})
And then , using this component would be like :
<my-component [attr.theme]='"blue"'></my-component> // would be blue theme
<my-component></my-component> // would be default
Go to your base Html file(where the root module, main app is injected) and link the CSS stylesheets in your header section.
Webpack will not include it in it's compiled/combined css file which is injected into the page. The css file will still be included at run time in the browser.
<html>
<head>
<base href="/">
<meta charset="utf-8">
<title>dummy</title>
<meta name="viewport" content="width=device-width">
//was not injected/modified by webpack
<link rel="apple-touch-icon" sizes="57x57" href="app/images/apple-icon-57x57.png">
//webpack's injected this below from other components's imported/inline css rules
<link href="index-c2cacb5fa3dfbca6116f4e4e63d5c3c7.css" rel="stylesheet"></head>
With angular-cli 1.6.5 you can do this:
ng serve --extract-css
You will still have the style-encapsulation features, but devtools will now point to the component css source file.
I use the angular-cli as well (v1.0.0-beta.22). When I am ready to build for production I run the following command:
ng build -prod -aot
This generates all my production-ready files (bundled, tree-shaken and minified etc). Of particular note is that it will generate two versions of the style sheets.
One in js:
styles.b2328beb0372c051d06d.bundle.js
And another version is plain css:
styles.4cec2bc5d44c66b4929ab2bb9c4d8efa.bundle.css
I run some post-processing on the css file with gulp and use the css version for my production build. I am not sure if the same holds true for lazy loading (where the cli will produced different chunks), but it works for sure when lazy loading is not being used (I haven't launched a production-ready project yet with lazy loading).
I also tried a build with JiT compilation:
ng build -prod
It also produced the raw/minified version of the css style sheet.
Now, I know for sure the folowing does NOT work:
ng build
This will produce all the css embedded within js file, styles.bundle.js.
Since you want to use the raw css file during development, the only workaround I can think of is that you run ng build -prod in order to get the css file. Copy/paste this manually into your assets folder. Run "format" on the file to un-minify the file. Then do a normal build with a modified index.html file referencing your raw css file, and removing the styles.bundle.js script reference. Not pretty, but it might work.
Put a wrapper class in html example-
<div class="component-1-wrapper">
all yout html here inside component-1-wrapper
</div>
Structure your sass(scss) in the following way. Since your styles are wrapped inside component-1-wrapper, therefore it will apply only to component-1-wrapperclass
.component-1-wrapper{
// all the styles for component-1 here
.class-hello{
// styles
}
}
You can compile your css with sass and put all the css(seperated by modules) in seperate folder.Start the filenames by _, sass can import them:
You can refer your styles-main.scss in app.ts file
#component({
styleUrls:['styles/styles-main.scss']})
The style-sheets will be structured this way and individual component's class styles will be applied to particular component since there is a wrapper class in html
Hope it helps!!!!!!
For personal/demo/work in progress, I don't want to make my own css file, but still apply some nice looking standard layout. Is there some public css I can link to? Similar to jQuery CDN links?
I want to do this in my header:
<link rel="stylesheet" href="http://someone.com/styles/xyz/layout.css" type="text/css" />
and then possibly one or two wrappers div's in my html file (e.g. <div class="header">...</div><div class="content">...</div> )
I looked at jQuery UI Templates, but they were a bit too complex. They require me to set class names to every button, input, check box etc.
Thanks,
Ola
Twitter Bootstrap is a popular CSS starting point at the moment