Is there a way to specify css that can achieve the following?
The css of the parent component does not affect the child component
Child component css does not affect the parent component
The child component is the one obtained by API of the external website. At this time, this child component will affect the style of the parent component (I cannot edit the style of the child component).
The main style is read by layout.
It is a style that has a large influence range, and it is troublesome to have each component read by scoped, so I want to avoid it.
I’m not sure if this will work. But you should try using sass. And import the css with a plain css and then use the imported file inside sass. Just like this
<script>
#import 'http://123.com/style.css'
</script>
<script lang=“sass”>
#app {
#include style
}
</script>
If this doesn’t work try with one of these Solutions - Stack Overflow
But I know this is your go to.
Related
I'm making diploma which needs to be downloadable.
So I made specific vue component (diploma itself) which is in the dom but hidden with v-show (display: none).
Now I only need that specific component to be printed (or saved as pdf) and not a whole page.
So I cannot initiate window.print(), but I need somehow to sandbox specific component, so I figured I could use hidden iframe and load component there and initiate print on iframe.contentWindow.print().
One problem is I don't see how I can load component in an iframe.
One way would be to use something like
iframe.srcdoc = downloadRef.value.$el.innerHTML;
but I don't have styling this way.
I also tried something along the lines of
iframe.srcdoc = ` ${css} ${downloadRef.value.$el.innerHTML}`;
where css is style tag string with styles, but again not all styles are applicable.
Is there any other way to load vue component into iframe and to render it as such (with vue naturally), or is there any other way to make certain component printable with all necessary styles applied, without using iframe at all?
Thanks in advance.
I think there's an easier way to achieve what you need without using iframe.
What if you could apply a certain css styling for that component, which would make it occupy the whole page and cover all other content
<style>
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
}
</style>
Credit goes to How to make a div fullscreen and atop of all other elements with jQuery?
You would then be able to add a conditional class on your special component:
<special-component :class="{'overlay': isPrintModeEnabled}"> ...
So all that's left is to enable the isPrintModeEnabled property as per your rquirements.
I'm trying to do something specific but can't find any information about it.
What I'm trying to do is make a common angular library with my styled components (size, font, ..) and then import this library in 2 different projects, so far so good.
But now I want the 2 projects to have different color/font/icon themes.
So I need a way to define the theme in the parent projects, and then gets applied to the styling of the library components.
This way al my components in the library can stay the same (single code base) and it can be used in different applications with there house style.
Is there a way to do this?
Kind regards,
P90K
Create an Angular Library
To create a Angular library you can follow the guide here. You've to publish it on npm and install on your projects.
Style your Library
1. Change Style Encapulation with ViewEncapsulation
Read More
Defines template and style encapsulation options available for Component’s Component. By using ViewEncapsulation.None you are exposing your styles to outer components.
import { Component, ViewEncapsulation } from '#angular/core';
#Component({
...
encapsulation: ViewEncapsulation.None,
...
})
Note: This can help to override any component CSS but be sure to use proper selectors
2. Use :host
Read More
The host can help to override CSS without touching the view encapsulations.
CSS pseudo-class function selects the shadow host of the shadow
DOM containing the CSS it is used inside
Lib in your parent template
<your-component class="custom-component-cls"></your-component>
Lib style in your parent style
:host{
::ng-deep .custom-component-cls{
color: white;
}
}
I have an AntD component, and i don't have access to the html markup to use useRef to apply a style to next class , depending by a condition:
span.ant-descriptions-item-content
This is why i used:
if(my condition) {
document.querySelector('span.ant-descriptions-item-content').style.background="red"
}
demo: https://codesandbox.io/s/basic-ant-design-demo-fdwxd?file=/index.js
It is ok to use native ways of accessing dom element like document.querySelector, or exists another method to do this in my case?
It is generally not recommended to mix different tools that handle changing how the web page is rendering. This can cause unpredictable behavior and components not updating correctly. If you want to change the appearance of a component using React you should be rendering that component within React.
I have many components that import hosted css files as follows:
<style scoped>
#import 'https://test.com/path/to/my-stylesheets/styles.css';
</style>
What I am wanting is a way to remove these imported stylesheets on an end lifecycle hook such as beforeDestroy.
Is this possible?
What you're trying to do depends on vue-loader (if you're using webpack) and it looks like a counter intuitive. So, there's no reason for styles to be removed from document. What you can do is to define your CSS classes in stylesheets or as a data variable in viewmodel and assign/remove those classes during Vue component's lifecycle like beforeCreate/beforeDestroy etc. if you like.
I was from angularjs, now picking up react. Even I was using angular 1.x which is already component based, but it still has template. But in react the file structure and the way we use to code front end has changed, like instead of spiting files by pages, u make files by component now. It promotes reusability but does that means how we apply the css also changed?
I saw this import { navBar } from 'styles/navbar.css' in navBar.jsx. Hmm how does css work together with JSX? doest navBar css load that file? What webpack plugin is needed for that? does it come from default? I'm using react-create-app by facebook so I didn't know much about config.
You use css-loader and style-loader to include CSS files in your webpack bundle. By default it generates some JavaScript code that creates a style element with the contents of the imported CSS file and appends it to the head element in your index.html.
So you can definitely use external CSS files to style your React components, just make sure that every CSS class is properly namespaced to avoid naming conflicts with the classes of other components.
For example you could adopt the BEM naming scheme. If your component is called NavBar, then the root element of that component might have a className of x-nav-bar (the x prefix is there to avoid clashing with frameworks like bootstrap), and all child elements, if they need to be styled, will then have class names like x-nav-bar__${childName}.
This kind of import { navBar } from 'styles/navbar.css' is not relevant to JSX but to css-loader. This is a webpack loader that handles css, and it supports cssModules, that allows you to encapsulate selector names in order to avoid css leaks.
So, shortly, that import exposes an object with mapping between your selector to unique string (usually an a hash).
For example:
// styles.css
.foo {
color: red;
}
.bar {
color: green;
}
// Component.jsx
import styles from './styles.css';
console.log(styles);
/* This will print something like
{
foo: '_h234jh',
bar: '_234m23'
}
*/