I am using prime ng dialog all over my angular application. I can change each specific dialog style by using ng-deep. For eg I have contact us page for which I have these files:
contact.html
contact.component.ts
contact.css
So I place the below css in contact.css and it changes the contact us dialog title bar color.
:host ::ng-deep .ui-dialog .ui-dialog-titlebar{
background-color: red
}
I want to do this for all the dialogs in my application, how can I do this? I placed the same css in style.css file in src folder and it didn't work.
So angular components by default employ a very handy strategy of Style Encapsulation which makes it so that styles don't bleed out into other components and cause unwanted effects.
You can utilize ng-deep like you have to allow styles defined within it to be inherited by child components of where it's specified.
However for things to be globally inherited you'll want to define them highest up in the order of inception so those styles cascade down to selectors below. In a default angular application that's not using SCSS or another pre-processor one of the easiest ways to do this is to add them to one of the first files initialized that hosts the child components such as index.html or app.component to allow components initialized afterwards to inherit them when they're rendered.
Hope this helps, cheers!
Related
Basic question on best practices for dynamically inserting SASS classes with React.
I have a React component with two props: componentId, and color. The components are rendered as a list. Each time they're rendered, I want them to set the component's CSS background color as this.props.backgroundColor.
I understand that I can do this with inline styles, but that that's generally frowned upon due to difficulty maintaining it. I currently have an SCSS file with a number of classes.
How could I dynamically append an SCSS class with the class name this.props.componentId and the color this.props.backgroundColor?
For example, if the component had this.props as
componentId: list-item-123456789
color: #00FFFF
How could I append, from the react component, the following SCSS class to my style.scss file?
.list-item-123456789 {
background-color: #00FFFF;
}
Is this a job for styled-components? Is this one of those cases where inline-styles is probably the best practice for the job? It feels icky to me to do that just from what I've been reading but I'm not sure how to approach the above solution.
As you've guessed, this would be a job for styled components or inline-styles. When your React application compiles, all of those SASS files are converted into standard CSS via Webpack (I presume). Thus, once your application has been bundled and deployed, your SASS files are redundant.
Inline styles are not the same as just setting a class on an element which you can do if you are going to actually manually create all those style classes.
Just do
<li className={{this.props.componentId}}>Some Item </li>
Make sure your SASS class's are global or in scope for that component.
I need to create a "plugin" that contains a user interface which will be displayed on many different vendor websites. This is a CMS agnostic plugin. I cannot use an iframe for SEO reasons. I need to isolate the plugin's css (and maybe js) from the rest of the website, and stop the rest of the website's css from getting to this plugin. How can I do this?
Update:
Ok, so I've asked a question that's a little too specific to my setup/tech. The question should have been: How do I isolate an html element from the rest of the document styles? This is answered here;
New Question: How do I scope Vue CSS so that it doesn't propagate up, but propagates to child components?
E.g I have the main Vue component which includes bootstrap.scss, i need that to apply to all child components, but I don't want it to leak into the main website. Adding scoped to style stops the leak upward, but I want it to apply to child classes as well.
Ok, I've figured it out.
Pretty simple really, combined with this answer to prevent parent -> child inheritance. I scoped all Vue css into #app { /*styles*/ } INCLUDING the bootstrap import. E.g.
<style type="text/scss" lang="scss">
#app {
#import '../node_modules/bootstrap/scss/bootstrap';
// rest of vue global styles go here.
// child components may use scoped
}
</style>
Note: I am NOT using scoped attribute on the root vue component.
I think this is what you’re looking for. In your .vue file you can add style tags to the template, then Vue will create Shadow DOM styles that only apply to your application. In the final product the styles are rendered via a data-v attribute to prevent class name conflicts.
https://vue-loader.vuejs.org/en/features/scoped-css.html
(Copied from my reddit answer)
https://www.reddit.com/r/vuejs/comments/76ss46/how_to_isolate_a_vue_application_from_the_rest_of/?st=J8UMA1JQ&sh=c3ebf5b1
I am using Webpack with Vue.js to create a large-scale web app. The problem I encounter is the following:
I've am using vue-router and the following structure for the main app template:
<customNav></customNav>
<router-view></router-view>
The navigation is a single file component that has its own styles defined inside the component file. Let's say it has a black background by default. Now, on single occasions (when showing different views through the router), I want it to be transparent.
I thought I might just overwrite the CSS in the router view component, but this doesn't work because Webpack is bundling all the CSS of components I import, and I have to import all the components in the main.js to define them in the router. Therefore, overwriting the style in a component leads to it being the global default, even if the component is not even used.
How would I solve this problem?
You can take help of dynamic styling of VueJS. You can assign a class, based on the value of a variable. So in your customNav You can have two classes: say black-bg and transp-bg and you can change this will help of a variable: blackBackground
<YourElem v-bind:class="{ 'black-bg': blackBackground, 'transp-bg'!blackBackground}"></YourElem>
I think you can change this variable in two ways:
Have this as an instance data and change it based on current route.
Have this in vuex state and change in different components based on your requirement.
I'm making a custom directive <top-nav>.
Should I isolate the CSS for this in its own file?
What if it requires CSS from the main application that's shared across other pages?
Take a look at LESS and SASS css compilers.
I structure my apps like this.
/app
/directives
/fooWidget
fooWidget.scss
fooWidget.js
fooWidget.html
/directives.scss
/app.scss
/app.js
If you intend to publish it somewhere then you definitely want to isolate the CSS.
If this is only for internal use, it's a matter of preference, but I think the majority of developers would prefer if it's separate.
CSS in a separate file can still inherit from CSS defined elsewhere. Eventually you'll probably end up using Gulp to minify and combine all your CSS anyway.
I don't see that as a necessity. If you are adding a template in your directive, then keeping the css to the external file won't do any harm, as the directive gets loaded when the DOM is being parsed & the style written for the element will be loaded accordingly from the external style sheet.
Hope that helps.
It is a good practice to use an isolate CSS file to the directive. You can use a structure for the directive like this:
/clockWidget
clockWidget.css
clockWidget.js
clockWidget.html
For the directive css it self you can create a css class that wraps all the html and use that class to affect only the directive html.
for instance, create the footer-widget css class and specify that class for the html elements of the directive.
In the clockWidget.css:
span .footer-widget{
background-color: red;
}
then in your html:
<div class="footer-widget">
<span>I'm The footer</span>
</div>
This way the css class will wrap all the html, only affecting the directive html. And you can use main application css without problems.
I downloaded a Web template which is based on bootstrap version 3.
Inside the template I found CSS files named bootstrap-cerulean.css, bootstrap-journal.css, bootstrap-classis.css. Although, I can not find a file named bootstrap.css. What do bootstrap-cerulean.css, bootstrap-journal & bootstrap-classis define or do? Are they themes for bootstrap? Do I still need to reference bootstrap.css if I reference one of the themes such as bootstrap-cerulean.css?
All the bootstrap.css styles are most probably modified and integrated with those three mentioned custom css files that you got with the template so no, you don't need to link the default bootstrap.css anymore unless you're planning to override certain elements on the page to the default style (which I would recommend using a new css file with the few changes kept there for overriding the template's style rather than linking the whole bootstrap.css to the template.