I'm using css modules for my reactjs project. Here is my file where I'm trying to use global css classes:
<div class='site-wrapper'></div>
<div class='site-wrapper-title'>Hello World</div>
Here is my styles.css
:global{
.site-wrapper {
color: 'green';
}
.site-wrapper-title {
color: 'red';
}
}
But it is not working. I think I'm doing mistake in importing. How can I import global css and then use it in my application?
Well, I'm newbie so sorry for foolish mistakes.
:global .site-wrapper{
color: 'green';
}
:global .site-wrapper-title {
color: 'red';
}
or
:global(.site-wrapper){
color: 'green';
}
:global(.site-wrapper-title) {
color: 'red';
}
should work for you
Related
I need to add an attribute [dir=ltr] to all the rules of a big CSS file except for some ones.
Source CSS:
.rule-1 {
color:black
}
.rule-2 {
color: yellow
}
.rule-3 { /* exclude */
color: blue
}
.rule-4 {
color: red
}
Target CSS:
[dir=ltr] .rule-1 {
color:black
}
[dir=ltr] .rule-2 {
color: yellow
}
.rule-3 {
color: blue
}
[dir=ltr] .rule-4 {
color: red
}
Maybe a CSS postprocessor is needed here.
Try using the css :not() attribute, example below:
[dir=ltr]:not(.rule-3) {
//..
}
You can learn more about this attribute and what it does here
The issue was solved using the PostCSS plugin postcss-prefix-selector.
postcss.config.js
module.exports = {
plugins: {
"postcss-prefix-selector": {
prefix: '[dir=ltr]', exclude: [/.rule-3(?![\w])/]
}
}
}
I have a scss file with over 20 lines of color variables. I want to create a css file with these variables to have one class for color and class for background-color.
Example:
from scss variable
$color-red: #FF0000;
to css
.color-red { color:#FF0000; }
.bg-color-red { background-color:#FF0000; }
Is there any Gulp plugin that allows me to do it?
any recomendation accepted but i need to do it with gulp if it is possible.
As #chriskirknielsen suggested, sass maps and the #each rule is a good choice here. This is the first time I have used these concepts but this works in my testing.
Your colors.scss file would look like this:
$colors: ("color-red": "#FF0000", "color-green": "#00ff40"); // etc.
#each $color, $value in $colors {
.#{$color} {
color: #{$value};
}
.bg-#{$color} {
background-color: #{$value};
}
}
The gulp-sass output in colors.css is:
.color-red {
color: #FF0000; }
.bg-color-red {
background-color: #FF0000; }
.color-green {
color: #00ff40; }
.bg-color-green {
background-color: #00ff40; }
See https://sass-lang.com/documentation/values/maps#do-something-for-every-pair
I'm using Angular 7 with Material Snackbar. I want to changes the color of Snackbar to green.
In app.component.ts, I have:
this.snackBarRef = this.snackBar.open(result.localized_message, 'X', {
duration: 4000,
verticalPosition: 'top',
panelClass: 'notif-success'
});
this.snackBarRef.onAction().subscribe(() => {
this.snackBarRef.dismiss();
});
In app.component.scss, I have:
.notif-success {
color: #155724 !important; // green
background-color: #d4edda !important;
border-color: #c3e6cb !important;
.mat-simple-snackbar-action {
color: #155724 !important;
}
}
But the Snackbar is still shown in its default colors.
I can see that the notif-success class has been applied to the snackbar
<snack-bar-container class="mat-snack-bar-container ng-tns-c18-84 ng-trigger ng-trigger-state notif-success mat-snack-bar-center mat-snack-bar-top ng-star-inserted" role="status" style="transform: scale(1); opacity: 1;">
Why is the custom css not working?
You should write that .notif-success CSS class on your main styles.scss, instead of the app.component.scss.
If you are wondering, it is the one which is on the same directory level as your index.html, package.json, etc.
MatSnackBar colors can be customized by adding this CSS rule to the styles.css file. Tested for Angular Material 15.
.mat-mdc-snack-bar-container {
--mat-mdc-snack-bar-button-color: red;
--mdc-snackbar-container-color: black;
--mdc-snackbar-supporting-text-color: yellow;
}
In Angular 15, the answer by Egemen Çiftci is the only one that works for me. I extended it to support different background colors for success and error notifications:
this.snackBar.open('Success', 'Close', {
panelClass: 'app-notification-success',
};
this.snackBar.open('Error', 'Close', {
panelClass: 'app-notification-error',
};
In the global styles.scss:
.mat-mdc-snack-bar-container {
--mat-mdc-snack-bar-button-color: #ffffff;
--mdc-snackbar-supporting-text-color: #ffffff;
&.app-notification-error {
--mdc-snackbar-container-color: #f23a2f;
}
&.app-notification-success {
--mdc-snackbar-container-color: #43a446;
}
}
"panelClass" styles is not being applied to Snack Bar in v15, It's because in v15 the background color is on a different element.
In .css file
.style-error {
color: white;
--mdc-snackbar-container-color: #FF005D !important;
}
In .ts file
openSnackBar(message: string, type:string) {
this._snackBar.open(message,'Ok', {
duration: 2000,
panelClass: ["style-error"]
});
}
Above code will work for Angular v15.
::ng-deep is deprecated as stated by #Akber Iqbal. Put the following code in the global css or scss
snack-bar-container.mat-snack-bar-container {
color: #155724 !important;
background-color: #d4edda !important;
border-color: #c3e6cb !important;
}
div.mat-simple-snackbar-action {
color: red !important;
}
This styling code worked on #angular/material#11.2.2 with #angular/core#11.2.3
Note: It doesn't work in the component css or scss
This is what you're looking for:
::ng-deep .mat-snack-bar-container{
color: #155724 !important;
background-color: #d4edda !important;
border-color: #c3e6cb !important;
}
::ng-deep .mat-simple-snackbar-action {
color: red;
}
complete working demo here
Instead of:
panelClass: 'notif-success'
Try:
extraClasses: ['notif-success']
I had the same issue and stumbled across this Stackblitz that had a working example.
Just realized extraClasses is deprecated, the accepted answer is probably better here.
Is it possible to use pure CSS variables with Vue without having to link any stylesheets or use SASS/PostCSS? Unsure why I'm unable to get this to work in its most basic form.
<template>
<div id="test">
TEST
</div>
</template>
<style scoped>
:root {
--var-txt-color: #c1d32f;
}
#test {
color: var(--var-txt-color);
}
</style>
I know you highlighted "without having to link any stylesheet", but I run into the same issue and there is a simple option - use just one external css file and include it in your App.vue, then you can access the variables anywhere else, in scoped styles as well.
variables.css
:root {
--font-family: "Roboto", "Helvetica", "Arial", sans-serif;
--primary-color: #333a4b;
}
App.vue
<style>
#import './assets/styles/variables.css';
</style>
LandingView.vue
<style scoped>
#landing-view {
font-family: var(--font-family);
font-weight: 300;
line-height: 1.5em;
color: var(--primary-color);
}
</style>
This won't work as expected because of scoped attribute for stylesheet. Example above compiles into:
[data-v-4cc5a608]:root {
--var-txt-color: #f00;
}
And, as you understand, it will not target actual :root element.
It can be solved by:
Not using scoped attribute for this stylesheet. Notice that it may cause styles conflict with other variables declarations for :root element.
Using current component's wrapping element as root. If we declare variables this way:
.test {
--var-txt-color: #c1d32f;
color: var(--var-txt-color);
}
.test-child-node {
background-color: var(--var-txt-color);
}
Then it will can reuse variables for other elements of the same component. But still, it won't be possible to use declared variables inside child components without removing scoped, if it is the case.
Why not just use this?
<style scoped>
* {
--var-txt-color: #c1d32f;
}
</style>
The generated CSS is:
*[data-v-d235d782] {
--var-txt-color: #c1d32f;
}
This has been working for me.
I just discovered that it looks like this also works, using the "deep selector"
>>> {
--var-txt-color: #c1d32f;
}
Generated CSS is:
[data-v-d235d782] {
--var-txt-color: #c1d32f;
}
I think I like this method more.
One workaround is to define them under a non-scoped style element like the following. However one thing to note here is, these variables will be exposed to other Vue components as well.
<style>
:root {
--var-txt-color: #c1d32f;
}
</style>
<style scoped>
#test {
color: var(--var-txt-color);
}
</style>
Late answer - Here is a working example with css vars derived from standard vue structures.
<template>
<div>
<component :is="'style'">
:root {
--color: {{ color }};
--text-decoration: {{ textDecoration }};
--font-size: {{ fontSize }};
}
</component>
<p>example</p>
</div>
</template>
<script>
export default {
props:{
color: {
type: String,
default: '#990000'
}
},
data: function () {
return {
textDecoration: 'underline'
}
},
computed: {
fontSize: function (){
return Math.round(Math.random() * (5 - 1) + 1) + 'em';
}
}
}
</script>
<style>
p{
color: var(--color);
text-decoration: var(--text-decoration);
font-size: var(--font-size);
}
</style>
Starting from the top...
Vue must have 1 root element, so I needed a div tag in order to include a sample p tag. However, you can just use the component-is-style tag and get rid of the div and p tags. Note the need for extra quotations "'style'".
The normal vue style tag can be scoped or not - as needed.
Well, now you can use CSS variable injection.
<template>
<div>
<div class="text">hello</div>
</div>
</template>
<script>
export default {
data() {
return {
color: 'red',
font: {
weight: '800'
}
}
}
}
</script>
<style>
.text {
color: v-bind(color);
font-weight: v-bind('font.weight');
}
</style>
Those styles are also both reactive and scoped. There won't be any unintended inheritance issues. Vue manages the CSS variables for you.
You can take a look at the RFC here.
Using LESS pre-processor along with shadow-dom for theming support of individual components. I have also attempted nesting :host-context and :host selectors to no avail.
:host-context(.dark) {
#import (multiple) 'variables/dark-theme';
.dropdown;
}
:host-context(.light) {
#import (multiple) 'variables/light-theme';
.dropdown;
}
.dropdown() {
//some component styles here
&:disabled {
background-color: #disabled-bg;
color: #disabled-color;
.dropDownListSelect {
cursor: not-allowed;
}
}
}
This is a result of my own ignorance with Shadow-DOM as it is still somewhat new to me. I was able to accomplish this by using the &:host selector.
:host-context(.dark) {
#import (multiple) 'variables/dark-theme';
.dropdown;
}
:host-context(.light) {
#import (multiple) 'variables/light-theme';
.dropdown;
}
.dropdown() {
//some component styles here
&:host([disabled]) {
background-color: #disabled-bg;
color: #disabled-color;
.dropDownListSelect {
cursor: not-allowed;
}
}
}