I am using react-select in my code. https://www.npmjs.com/package/react-select
I want to style my drop down using classNames, so that I referred https://react-select.com/styles. The DOM structure of react slect is shown in the link.
How can I style the react-select using classNames?
Can anyone show a sample code?
According to the documentation
If you provide the className prop to react-select, the SelectContainer
will be given a className based on the provided value.
So it should work like this:
<Select className="abc" .... />
Then you can use your classname as usual.
.abc {
color: red;
}
You can also use classNamePrefix
by specifing a classNamePrefix, react-select will render all classNames with your prefix. If you use this:
<Select className="abc" classNamePrefix="react-select" ... />
Your Select will automatically render a class structure like this:
See their example:
For example, given className='react-select-container' and classNamePrefix="react-select", the DOM structure is similar to this:
<div class="react-select-container">
<div class="react-select__control">
<div class="react-select__value-container">...</div>
<div class="react-select__indicators">...</div>
</div>
<div class="react-select__menu">
<div class="react-select__menu-list">
<div class="react-select__option">...</div>
</div>
</div>
</div>
So in your css, simply do:
.react-select-container {
background-color: 'red';
}
.react-select__menu {
height: 100vh;
}
etc
Related
I would like to define a class to alternating rows in angular 4, how to do this?
HTML
<div class="scrollbars">
<div *ngFor="let path of Xyzpaths">
<div>{{path.xyz}}</div>
<div>{{path.salesItem}}</div>
<div>{{path.path1}}</div>
<div>{{path.path2}}</div>
</div>
</div>
CSS
.odd { background-color: #f2f9ff;}
.even { background-color: #eceff3; }
Use CSS's nth-child selector:
scrollbars > div:nth-child(even) {background-color: #f2f9ff;}
scrollbars > div:nth-child(odd) {background-color: #eceff3;}
Try to avoid adding template logic where you don't need to, and in this case, you don't need to -- CSS can do it all and is orders of magnitude more efficient than using a template directive.
yes, you can use the odd and even local variables in the ngFor, something like this:
<div class="scrollbars">
<div *ngFor="let path of Xyzpaths index as i; let even = even; let odd = odd"
[ngClass]="{ myOddClass: odd, myEvenClass: even }">
<div>{{path.xyz}}</div>
<div>{{path.salesItem}}</div>
<div>{{path.path1}}</div>
<div>{{path.path2}}</div>
</div>
</div>
Documentation.
How can I use component variables within style TAG in Angular 2?
I do have an Angular 2 component for my header which I like to color depending on a users setting. Thus I'd like to assign an background and font color. While I know how to to this with an attribute binding to an element, I couldn't figure out how to use in a style tag.
Using attribute binding for style works well, however this gets pretty anoying for several subelements, especially if they are nested within other sub components. [ngStyle]= attribute is also only working on a single element.
<header id="header" [style.background-color]="changeBackground()">
<div>
Some Text
Some Link
<subcomponent></subcomponent>
</div>
<div> ... a lot mor stuff </div>
</header>
Thus I'd like to add something like
<style>
#header, #header a {
color: {{mycolor}};
}
</style>
to the html template. However this is not working
Similar Questions do not answer this question yet and only show attribute binding as a solution:
Angular2 dynamic change CSS property
Dynamically updating css in Angular 2
https://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components
https://coryrylan.com/blog/introduction-to-angular-2-ngclass-and-ngstyle
It looks to me like you are just creating a new component called 'subcomponent', why not do that?
subcomponent.ts:
import { Component } from '#angular/core';
#Component({
selector: 'subcomponent',
templateUrl: './subcomponent.html',
})
export class SubComponent {
mycolor = 'blue';
}
subcomponent.html:
<style>
#header, #header a {
color: {{mycolor}};
}
</style>
To your #Component object, add
styles:[ `#header, #header a {
color: {{mycolor}};
}`]
So for example:
#Component({
template: `<header id="header" [style.background-color]="changeBackground()">
<div>
Some Text
Some Link
<subcomponent></subcomponent>
</div>
<div> ... a lot mor stuff </div>
</header>`,
styles: [ `#header, #header a {
color: {{mycolor}};
}`
`]
})
Use NgStyle as explained in this answer
https://stackoverflow.com/a/41903349
in short
<header id="header" [ngStyle]="getStyle()">
<div>
Some Text
Some Link
<subcomponent></subcomponent>
</div>
<div> ... a lot mor stuff </div>
</header>
and
getStyle(): any {
return {"background-color" : this.changeBackgroundColor()};
}
I have a Home component with this inside:
<alert type="info">Hello from ng2-bootstrap</alert>
Inside my home.style.scss, I have this:
:host .alert {
background-color: green;
}
which should change the background color to green, but it does not.
The above css code will produce this style:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3] {
background-color: green;
}
and the final HTML looks like this:
<home _nghost-wjn-3="">
<div _ngcontent-wjn-3="" class="card-container">
<alert _ngcontent-wjn-3="" type="info" ng-reflect-type="info">
<div class="alert alert-info" role="alert" ng-reflect-initial-classes="alert" ng-reflect-ng-class="alert-info">
Hello from ng2-bootstrap Sat Sep 17 2016
</div>
</alert>
</div>
</home>
I don't know what the problem is here, but I think the selector is wrong. I'd like the final selector to be:
[_nghost-wjn-3] .alert
instead of:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
Or in other words, why is there no _ngcontent-wjn-3 attribute on <div class="alert">...</div>?
Maybe I'm doing the whole thing wrong. What I'm trying to achieve is to customize the CSS of the individual bootstrap components (<alert> in the code above) as provided by the ng2-bootrap library (https://github.com/valor-software/ng2-bootstrap) inside my custom components (<home> in the code above).
I'm using the default view encapsulation (emulated) in the home component.
How can I do that please?
I figured it out myself. This is what I was looking for:
:host /deep/ .alert {
background-color: green;
}
The above code will produce the following:
[_nghost-wjn-3] .alert {
background-color: green;
}
This way I can modify the default styles of a bootstrap class (.alert, in this case) inside of my component <home>.
Source: https://angular.io/docs/ts/latest/guide/component-styles.html
You need:
[_nghost-wjn-3] alert[_ngcontent-wjn-3]
Instead of:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
If you go and check your structure, alert tag has the ngcontent... attribute, not his div child with alert class.
I have a ng-click assigned to an ionic item-divider as follows:
<div class="item item-divider" ng-click="toggleShowingProfile()">
PROFILE
</div>
When this gets clicked it goes grey momentarily. I would like a much more subtle effect. I want it to go slightly lighter in colour so am trying to change the opacity like this:
.item-divider{
background-color: #336688;
color: white;
}
.item-divider:active{
opacity: 0.8;
}
My CSS code seems to make no difference. Is there a way to override the default behaviour?
CSS Only
The easiest way to override it is to give it a custom class and use that as your CSS selector. Also, the item is getting the activated class added to it on click, so :active won't change anything. To override you need to do something like this:
HTML:
<div class="item item-divider custom-item-divider" ng-click="toggleShowingProfile()">
PROFILE
</div>
CSS:
.custom-item-divider.item-divider {
background-color: #336688;
color: white;
}
.custom-item-divider.item.activated {
background-color: #336688;
opacity: 0.8;
}
Codepen demo: http://codepen.io/brandyshea/pen/epEedW
Note: you could also use <ion-item> instead of using a <div> with the item class.
Sass
If you are using Sass, you can override the Sass variables directly:
$item-divider-bg
$item-divider-color
$item-default-active-bg
$item-default-active-border
See these variables here: https://github.com/driftyco/ionic/blob/master/scss/_variables.scss#L311
and here:
https://github.com/driftyco/ionic/blob/master/scss/_variables.scss#L372
You will want to override the variables in your own Sass file, not Ionic's Sass files directly.
Let me know if you have any questions!
<div class="item item-divider" ng-click="toggleShowingProfile()">
PROFILE
</div>
I created a website that has different navigation menus. In 2 menus, I use the same HTML class element.
I have a .css file that styles that class element in 1 menu. However, in another menu, I would like to style the elements differently.
Yes, I know I can rename the class name, but to be consistent with what I have right now in the structure of my markup, and also the fact that the class name is used to style multiple other elements, how would I be able to apply different styles to 2 different elements with the same class name?
Can this be done using some kind of if statement condition in CSS?
For example, in 1.html:
<div class="classname"> Some code </div>
In 2.html:
<div class="classname"> Some different code </div>
Since I just want to style this "one" element differently in 2.html, can I just add an id attribute along with the class attribute, and use both the id and class and somehow as the selector?
Once again, I would not like to remove the class name at all, if possible.
Thanks!
I'll just add that typically when there are multiple menus you might have them wrapped in a different structure. Take for instance:
<nav class='mainnav'><div class="classname one"> Some code </div></nav>
<div class='wrapper'><div class="classname"> Some different code </div></div>
You can easily target these:
.mainnav>.classone {}
.wrapper>.classone {}
Or if the parent html has a class:
<div class='ancestor1'><div><div class="classname one"> Some code </div></div></div>
<div class='ancestor2'><div><div class="classname one"> Some code </div></div></div>
.ancestor1 .classname {}
.ancestor2 .classname {}
Obviously this depends on where in the html they might be.
You can add another class name to each element.
<div class="classname one"> Some code </div>
<div class="classname two"> Some different code </div>
And then aplpy different rules to them:
.classname.one {
border: 1px solid #00f;
}
.classname.two {
border: 1px solid #f00;
}
Edit:
Updated Demo link: http://jsfiddle.net/8C76m/2/
If you must keep only one class for each element, you may try the nth-child or nth-of-type pseudo-class:
.classname:first-child {
font-size: 2em;
}
.classname:nth-of-type(2) {
color: #f00;
}
Ref:
http://www.w3schools.com/cssref/sel_firstchild.asp and http://www.w3schools.com/cssref/sel_nth-of-type.asp
Just give each one a different id
#firsthtml .classname {
}
#sechtml .classname {
}
Be sure to use the space, as #firsthtml.classname is something totally different.
<div class="classname" id="firsthtml"></div>
<div class="classname" id="sechtml"></div>
You could also use two different class names
<div class="classname secondclassname"></div>
Define secondclassname in your css with the additional css
.classname.secondclassname{
}
You can also do something like this:
<div class="classname"> Some code </div>
<div class="classname second"> Some different code </div>
And the CSS for the first .classname would be something like that:
.classname:not(.second) {}
For the second element it goes easily:
.classname.second {}
I know this is a poor way of doing it, the suggestions from previous answers are helpful, but try this maybe:
First menu:
<div class="classname"> Some code </div>
Second menu:
<div class="classname" style="margin-bottom:0;color:Black;width:100px;height:100px"> Some other code </div>