I'm injecting Vue app in to existing webpage which can be any page.
And I'm using this scss
#vueApp {
all: unset
* {
all: unset
}
}
on my Vue root element, to remove all parent styles from existing webpage to be applied in my Vue app.
But it also removes my styles I'm using in my own components.
I want my styles to be applied ON TOP of the applied all: unset style.
As I understand it happens because
#vauApp * {all: unset}
have higher priority than my components styles because it have deeper selector. And my component styles have only one selector for example
.myButton {...}
Current solution
Add additional selector to components styles
<style lang="scss" scoped>
#vueApp .myButton {
...
}
Related
Chaining selectors in css file doesn't seem to apply styles. I am importing the styles in the component and it only applies for the main class, for example:
import styles from './Home.module.css'
const Home = () => {
return (
<header className={styles.header}>
<div className={styles.headerContainer}>
...
and than in Home.module.css I have:
.header {
// some styles that are getting applied
}
.header .headerContainer {
//some styles that don't show up
}
On the page I am able to see header that is styled but not the headerContainer. So I understand that Next js automatically adds some variables to the end of the classes when passing styles item to jsx but trying to understand how I would chain the selectors in css and be able to use styles in such way in Next JS.
I have some css rules in my global.css file, how do I override these stylings for specific pages?
NextJs comes bundled with styled-jsx. You can leverage this library to insert css rules in the page, which can override rules set by your global css file.
export default () => (
<div>
<style jsx global>{`
body {
background: red;
}
`}</style>
</div>
)
Simply create a class or id in the top level element of the page. After you‘ve done that, override the styles you want by specifying new styles with the selector of the page. By doing that, the styles will be more specific than the global css-rules, which will therefore be overriden.
See an example below.
// global.css
p {
font-size: 1.2rem;
}
// Style to load on the page that has a top level selector of #landing-page.
#landing-page p {
font-size: 2rem;
}
An other alternative would be to use a layout component that is defined per page level, and load the global styles in there, if needed. Checkout this link.
Could you please tell me why css is not applied on p tag ? I have nested components .Now I want to add css in inner component element .but color property not applied why ??
Here is my code
.a p {
color: blue;
}
.a .test{
color: blue;
}
https://stackblitz.com/edit/angular-f99kxh?file=src%2Fapp%2Fhello.css
You can use ::ng-deep to get hold of inner elements.
.a ::ng-deep p {
color: green !important;
}
updated stackblitz
This happens because of angulars css encapsulation, which binds css to the scope of the component it is attached to, rather than allowing its default cascading behaviour.
You can either just create a global css file, which is not component-specific and import it in your index.html or disable it in general.
Components CSS will get applied to HTML view. Hence, you should write css in components css file.
abc.ts
#Component({
selector: 'abc',
template: `<p class="test">abc</p>`,
styleUrls: ['./abc.css']
})
in abc.css add your css.
I hope it will help you!
I have the following style:
.ag-theme-fresh .ag-row-selected {
background-color: #bde2e5;
}`
It comes from a css style file of a theme. But I want to overwrite it with this style:
.ag-theme-fresh .ag-row-even .ag-row-selected {
background-color: #1428df;
}
But it has not effect and my component uses the first style. How can I overwrite the first style 1? I tried with !important but it does nothing.
Should I define my custom style at the beginning of the css file?
UPDATE:
I found I can use the function gridOptions.getRowClass to set the style class to be used. But I would like to solve the issue central (for all the angular grids that I use in my application). Any idea?
You should use ViewEncapsulation
Just add to your component encapsulation: ViewEncapsulation.None:
import { Component, ViewEncapsulation } from "#angular/core";
#Component({
selector: '....',
templateUrl: '....',
styles: [`
.ag-theme-fresh .ag-row-selected {
background-color: #1428df !important;
}
`],
encapsulation: ViewEncapsulation.None
})
To override the ag-grid use you need to use ng-deep as the style defined in angular component do not overide ag-grid css
:host ::ng-deep .ag-header-cell-label {
justify-content: center;
}
update : this will make the style global. By changing the encapsulation set as none (ViewEncapsulation.None) at component will make style global as well.
if you are using sass or scss you could override in the style.scss/sass. this would be applicable at all places
#import "../node_modules/ag-grid-enterprise/dist/styles/ag-grid.scss";
#import "../node_modules/ag-grid-enterprise/dist/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";
.ag-theme-alpine {
#include ag-theme-alpine(
(
// use theme parameters where possible
alpine-active-color: #c066b2,
)
);
.ag-header-cell-label {
justify-content: center;
}
}
if you have need of doing at a specific grid, prefer custom class and make sub-class for the ag-grid.
You can also apply the styles globally and if you do so it will override the styles for all your ag-Grid components. This might not be an option if you are trying to style the components individually, but it's a good way to give a global base style override.
Also, you should try to use more specific selectors instead of using important.
Here is an example:
.ag-theme-alpine > .ag-row.ag-row-selected {
background : red;
}
In some SCSS files, I see the following:
:global {
/* ... */
}
I don't know if it is an SCSS feature or a CSS feature.
I tried searching about it but couldn't find any good results at first sight.
The :global operator is used in CSS Modules. Modular CSS uses a CSS Modules compiler to scope CSS styles within their respective modules (e.g., React component).
Here's an example from a React module (in the file ErrorMessaging.less for the ErrorMessaging.jsx React component):
:global(.ocssContainer) {
.ui_column {
padding-left: 0;
}
}
This gets compiled into:
.ErrorMessaging__alertContainer--1I-Cz .ocssContainer .ErrorMessaging__ui_column--3uMUS {
padding-left: 0;
}
But now I add a :global modifier onto .ui_column:
:global(.ocssContainer) {
:global(.ui_column) {
padding-left: 0;
}
}
And this is what it compiles to:
.ErrorMessaging__alertContainer--1I-Cz .ocssContainer .ui_column {
padding-left: 0;
}
Now .ui_column can apply to any child element with that style, including in a child React component, and not just .ui_column elements that are part of the ErrorMessaging React component.
It looks like they are using CSS Modules. If you follow the docs they say:
:global switches to global scope for the current selector resp.
identifier. :global(.xxx) resp. #keyframes :global(xxx) declares the
stuff in parenthesis in the global scope.
The :global selector keyword is used in css modules to specify that a class should not be scoped to the component in which it is defined. This selector allows the class to be used globally in the application, rather than just within a specific component. For example, let say you have a .is-global-class class defined in a CSS Module file, you can use :global(.is-global-class) to apply that class to an element and make it available globally.