I have an angular component that is pulled from the library (ts file, css file, html file).I need to use the same component with i.e. its ts file and html file but with a different css file
the library is local so I have access to modify it
If your library use a .css outside the component (e.g. all the material angular components) simply enclosed in a div and make a more specific selector. e.g.
<div class="custom">
<button mat-button>Basic</button>
</div>
your styles.css
.custom .mat-mdc-button:not(:disabled){
color:red;
}
Else, you can give a class to your component. After override the .css using selector.class tag{...} in your styles.css
e.g.
your component
h1 { color:red;font-family: Lato; }
your .html
<app-component class="custom"></app-component>
//or
<div class="custom">
<app-component class="custom"></app-component>
</div>
And your styles.css
app-component.custom h1{
color:green
}
/**Or**/
.custom app-component h1{
color:blue
}
It's neccesary you use "styles.css" (or another file that change the "global styles").
a stackblitz
Related
Here is the example
main.css
mobo.css
styleguide.css (Where all CSS variables are mentioned)
Can I use them in main.css and mobo.css ???
"CSS variables" is the colloquial name for Custom Properties.
Like any other property, it doesn't matter where it is set from¹, only that it applies to the element. Therefore it doesn't matter which stylesheet sets the properties or which one reads it.
<style>
#foo {
background: var(--example);
height: 35px;
}
</style>
<style>
#foo {
--example: red;
}
</style>
<div id="foo">
</div>
Footnotes
If multiple sources try to set the same property then it might start to matter since document order is one of the decision points when calculating the cascade order.
Yes, just link your file with all the variables in the HTML
<link rel="stylesheet" href="var.css">
Or if you are using SASS, in your main css file you can do :
#import('file.css');
I wish to set some styling on the storybook canvas and docs at a global level. Could anyone suggest me a way out?
Thanks!
You can use the preview-header.html for that. Just add that file to your .storybook folder. Then add a style tag there, e.g.:
<style>
body {
font-size: 15px;
}
</style>
All it's contents are being injected to the Storybook preview Iframe, so you can add styles as well as other scripts and stuff.
https://storybook.js.org/docs/react/configure/theming#global-theming
Create manager-head.html file in .storybook directory and set your styles in
<style>
...
</style>
I want to insert into component inline css like
<div id="slide1" :style="item.css" v-html="item.html" />
Where my item.css contains string with many css definitions e.g.
#slide1 {} #slide1 p {} #slide1 h2 {} #media(...) { #slide {} } ....
What is the best approach to do this?
So what you are doing here is not loading styles, you are loading a full css set of rules. The style property of an HTML element will only let you add css properties, not blocks of rules like #slide1 {...}.
If you want to load the rules for a singular component remotely, you will want to do use a scoped style block for your component (assuming you are using single file components), like so:
<template>
...
</template>
<style scoped>
#import url("link-to-your-remote-styles");
</style>
What we're doing above is:
making sure that the styles loaded in this component will not bleed out of its scope by using the scoped attribute of the <style> tag;
loading the styles using the #import rule from CSS
Here's a link to a sandbox where I load tailwind just for the scope of one component.
I don't think it is possible, but I will ask anyway:
Can I apply an external css file (Bootstrap for instance) to a div and its children without affecting the rest of the page.
For example, I need to migrate a footer written with Bootstrap over to an existing page. That page does not use bootstrap. If I link Bootstraps css at the top of the page, the css is applied to the whole page which ruins existing css. How can I just apply the bootstrap styles to the footer section without having to rewrite most of the page's css?
Any suggestions?
I ended up using LESS to compile a new css of bootstrap with a prefix of .bootstrap as seen below. It works, but i wonder if there is a more traditional way of handling this problem.
file: bootstrap-only.less
.bootstrap {
#import 'bootstrap.css'
}
file: bootstrap-only.css
.bootstrap .container {
width: 100%;
}
file: page.html
<style>
.container { width: 20px; }
</style>
<link rel="stylesheet" type="text/css" href="bootstrap-only.css">
<div class="not-bootstrap">
<div class="container">I am 20px</div>
</div>
<div class="bootstrap">
<div class="container">I am 100%</div>
</div>
You can try usig scooped css.Please do refer the following sample code.
<div>
<style scoped>
#import "filename.css";
</style>
//your div with its children will come here
</div>
Your inline styles should not be affected by adding Bootstrap as inline styles take precedence over styles from external resources. The only elements that should be affected are the ones in the page that share class names with bootstrap classes.
You can try referencing the Bootstrap css before your own css and your stylesheet will take precedence over the Bootstrap css. Unfortunately this may add styles additional styles to some of your classes which that you didn't explicitly reference in your stylesheet and may still change the look of your page.
For those classes that exist in both bootstrap and your stylesheet it's probably best to just change the names of those classes in your stylesheet and page. A quick way to do this is to use "replace" search for the class name and replace it with the new class name most IDEs have a way to "replace all" so it's often just a bit of typing and a few clicks to change a bunch of styles.
You can try using the Angular 2+, where you can simply create an component and us it anywhere irrespective of the page css. Basically it will create a shadow DOM and will not be accessible outside that component.
My SASS file:
#import "path/to/a/special/style-set/*"
// Custom Styles
span
color: #fff
My HTML:
<a href="index.html>Link</a>
<div id="special-link"><a href="index-special.html>I am special</a></div>
Question: How can I apply the imported style set from above to the div special-link only and not to any other divs on the page?
I thought that this is possible:
#special-link
#import "path/to/a/special/style-set/*"
but that does not seem to work.
Having ID in your Div would allows you only to style that specific div, actually you don't need to create and other stylesheet for that. But if you need to import that sass file then in your imported sass file you have to indicate the style for the id #special-link, then it should work.