I'm using CSS Modules within a React application. I also have a dropdown component with some global styles (which I'm happy with, as the general styles I want to re-use).
When the dropdown is active, a CSS class is applied (.dropdown--active). Is there a way I can include that global class alongside my component's locally scoped styles? i.e., what I'd like is for this to work:
.myClass {
color: red;
}
:global .dropdown--active .myClass {
color: blue;
}
However, that syntax makes the entire selector global, which is not what I'm after: I want .myClass to be scoped to the component.
just include the desired global class in parens:
:global(.dropdown--active) .myClass {
color: blue;
}
Related
Is there a way in Svelte to add styles that only affect the current component and any descendant components?
Svelte supports a native :global() selector wrapper which will declare styles for that selector in the global scope, but I am looking for something similar which only matches selectors in the current or any descendant components.
For example (REPL):
App.svelte
<script>
import C1 from './C1.svelte';
let name = 'world';
</script>
<div><C1>Hello {name}!</C1></div>
C1.svelte
<script>
import C2 from './C2.svelte';
let name = 'world';
</script>
<style>
:global(div) {
padding: 10px;
background-color: blue;
}
div {
background-color: red;
}
</style>
<div><C2><slot /></C2></div>
C2.svelte
<div><slot /></div>
In the above example, all three components receive the global styling from the middle child component, C1.svelte. I am looking for a way to do a sort of hybrid styling (not passing down styles to child components) to add "global-down" styles that only affect components downward in the component tree.
When the :global() selector wrapper is not used, matched nodes are assigned a unique class which the selector then targets, added to the selector during compilation. What I am asking/suggesting would be something like this:
:find(div) {
background-color: blue;
}
…where :find() similarly assigns a unique class to any HTML elements matched in the same or descending components. Is this possible?
You can scope styles to only child components by combining :global() with a scoped selector. For instance, the following selector will apply to all divs in any component that are the descendant of a div in this component.
<style>
div :global(div) {
padding: 10px;
background-color: blue;
}
</style>
The selector is transformed to something like this:
div.svelte-hash div { /* etc */ }
If you also want to also target top-level divs in this component, you could write the rule like this (though this may have CSS specificity implications):
<style>
div, div :global(div) {
padding: 10px;
background-color: blue;
}
</style>
I created a spinner component. I wanted it to be self-contained and not rely on external css, so in the component I include the scss to style it. The component template is a div with a class of sbl-circ. I can add this anywhere in my app and it works as designed.
Now, I created a second component (a button). I want to add the spinner component to this button. It works, but the spinner color is not correct for when it's inside the button.
So, I am trying to re-color the spinner with the scss for the button component. So far the only way it works is if I do
:host ::ng-deep {
button.btn.btn-primary {
.sbl-circ {
color: white;
}
}
}
I know that ::ng-deep is deprecated. What's the correct way for the button component to re-color any spinner components inserted inside of it?
Try using :host-context.
You should be able to use it like:
:host-context(button.btn.btn-primary) .sbl-circ {
color: white;
}
Excuse my unfamiliarity with angular. But if I were to attempt the resulting css to not be over-written by another style, I would try to use !important as a property value in the scss.
Example:
p {
color: red !important;
}
Using: Gatsbyjs
Problem:
Trying to declare css variables at :root (which works very well), but onces I try to override them like that:
:root { --feature-background: red; }
:root [data-theme="gradient"] {
--feature-background: blue;
}
<div data-theme="gradient">Hello</div>
I get the following warning and the I get the fallback color.
--feature-background is not getting overwritten, which is what I expect.
Custom property ignored: not scoped to the top-level :root element
How can I apply Vue.js scoped styles to components loaded via <view-router>.
Here is my code:
<template>
<div id="admin">
<router-view></router-view>
</div>
</template>
<style lang="scss" scoped>
#admin {
.actions {
display: none;
span {
cursor: pointer;
}
}
}
</style>
When I visit the /posts a component named Posts will be loaded, inside this component I have a
<div class="actions">
some content
</div>
The problem is that the style defined in #admin is not applied to .action element. When not scoped, this works fine. The problem come when the #admin component styling is scoped.
Is there any way to do that while keeping the .actions style inside the admin component scoped style tag?
This is probably what you want https://vue-loader.vuejs.org/en/features/scoped-css.html#deep-selectors
Since your code snippet specifically uses SCSS you'll have to use the /deep/ combinator.
If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the >>> combinator:
<style scoped>
.a >>> .b { /* ... */ }
</style>
The above will be compiled into:
.a[data-v-f3f3eg9] .b { /* ... */ }
Some pre-processors, such as SASS, may not be able to parse >>> properly. In those cases you can use the /deep/ combinator instead - it's an alias for >>> and works exactly the same.
So you'd end up with:
<style lang="scss" scoped>
#admin {
some-property: some-style;
/deep/ .actions {
some-property: some-style;
}
}
</style>
You can put styles in a separate file and reference it from all components that need it:
<style src="path/to/your/styles" lang="scss" scoped></style>
The reason why router-view tag wont pass styles to its child is because the router-view itself is not a style-able html tag, therefore you cant apply any styles to it. You can try but it wont render.
Reason: The router-view is essentially a template tag, or placeholder for Vue to anchor to and insert the component or View that gets called for that route. As a result, the router-view tag wont appear in the compiled markup, you will only see the View or Component thats being loaded.
It sort of works the same way as the App Entry point works for the Vue App into the index.html file. At least that's my experience and knowledge.
Also, #Antonio Trapani good answer, I would add that you can even go as far as having a scss file with all your global styles, or styles needed across multiple components, then just #import the styles into the App.vue that will give you access across the whole app. Also, IME.
Hope this helps some.
Cheers.
I have some styles that are meant to apply anywhere, including deep inside components. They're defined like this:
<style id="base-css" is="custom-style">
:root .primary {
color: red;
}
</style>
The result was that if I had, for example a <span class="primary"> anywhere, no matter how deep inside a Polymer component, it'd always apply. In fact, inspecting this span shows that the style was rewritten as:
:not([style-scope]):not(.style-scope):root .primary {
color: red;
}
Since I've updated my Polymer to 1.7.0, this no longer works. Styles defined this way no longer penetrate into components, and only work outside them. Adding a span with .primary to body and inspecting it shows that the style is now rewritten as:
html .primary:not([style-scope]):not(.style-scope) {
color: red;
}
Which, of course, wouldn't work inside a component, since all inside elements have .style-scope on them.
I read 1.7.0 release notes, and tried replacing :root with html, with exactly the same result.
Does anyone have any idea on how I can get this to work again?
Thank you.
Creating style hooks using CSS custom properties
You can tweak internal styles if you provide styling hooks using CSS custom properties. You create "style placeholders" inside the element that you can override from the main page.
Inside the main page:
<style>
base-css {
--primary: red;
}
</style>
Inside the element:
<style>
:host([background]) {
// Use --primary is not define, use #9E9E9E
background: var(--primary, #9E9E9E);
}
</style>
Documentation
Using CSS variables
Shadow DOM v1: Self-Contained Web Components