I'm trying to style mat-select's differently per component. I have 1 main select in my (always visible) header, and multiple in different components within my SPA. I'm trying to style the header mat-select differently because it has a dark background, the rest should be unstyled, and not affected by the header styling.
I've tried using ngClass & ngStyle, but they don't add the required classes to childs, just to the main class. I've tried using ::ng-deep and /deep/ but they alter the styling of components in other parts of the application. So technically they work, but with the wrong result.
https://stackblitz.com/edit/angular-kzwatd
I'm hoping to just alter the text color to white, since the background of the mat-select is dark.
Anyone have any clue why the stackblitz is not working?
Try using :
<mat-select class="main" placeholder="Main"> ....
/deep/ .main .mat-select-value{
color: red;
}
https://stackblitz.com/edit/angular-rucggb?file=src/app/main-component.css
Related
How to style a row in ngx-datatable component? Here is an example in component's documentation:
https://swimlane.github.io/ngx-datatable/#css
When I run same demo only one row has background color set.
Here is my demo
In order to style properly the child component from the parent component, you can use one of the methods specified in this link. Preferably use the answer 3 in the link which will prevent the use of deprecated selector like :deep:. You can fix the color not appearing in even rows by
/deep/ .age-is-ten { background: #ffc91f !important;}
I'm relatively new to angular. In the process of converting a React app to Angular just for learning purposes. I have a parent component that has a button (Custom Button Component). This button when loaded in the parent should be hidden and on hover should show the button. So you probably get an idea that I have some CSS selectors related to the parent component that override the child CSS. First should be display: none and then on hover I change it to display: flex
So the first problem I encountered was that I could not override the child CSS from the parent CSS. After reading all kinds of posts I moved the CSS overrides from the parent CSS to the global stylesheet and also added encapsulation: ViewEncapsulation.None to the child component.
Next thing I noticed is that the align-items: center was not working on the child. First thought I had that guess I have to add that part to the global styles also? but what I really need to know is that is this the norm in Angular? If yes, then some things don't make sense to me. These styles are really not global. They are only related to the parent component then it seems kind of weird to add those to the global stylesheet.
In regards to the align-items not aligning the child (custom-button), I believe that happens because of the extra div being added around the button. So how do you handle such situations?
Appreciate any advice/tips.
Thank you!
You can overwrite children CSS classes from the parent componet. this is the way:
Assuming your child component have this CSS
.child-class {
background-color: blue;
}
When you use this component the background color will be blue. But if you want to change that color to RED. In the parent component where you want the change you need to do this:
In your parent component
:host {
::ng-deep{
.child-class {
background-color: red;
}
}
}
:host this refers to the component's HTML tag (that is created by Angular, in your case the tag of the component that contains the app-custom-button). Also you can apply css to the component tag.
for example:
:host{
width: 100vw;
height: 100vh
}
And with ::ng-deep you can overwrite ALL styles inside your compoent. Does not matter if is a style from your child compoenent, grandchild, great-great-grandson, etc... even if its a component from an external library.
So... For example you can have the "custom background color as blue" then in one component you can keep that color but in other component you can change the color to red and in other component you can change the color to green....
Angular have the concept of ViewEncapsulation. By default, the value is set to ViewEncapsulation.Emulated and the css you put in the component is specific to the component and only to this component. The CSS will not be applied to the child components.
You can switch to ViewEncapsulation.None and you will disable this behavior and all the css rules in your css file will be applied to all your components in the application, and maybe you don't want this behavior. That's why I advice you to leave this option.
The other option you got is to put your specific css rule in src/style.css (if you didn't modify the default path). All css rules put in this file will be applied for all the application and you can keep the ViewEncapsulation of your component.
For align-items, i think you are right : the app-custom-button is wrapping your button, so you need to set a width: 100% to your button, then eventualy resize your app-custom-button
How to style the default/placeholder text of an <ion-select> component in the Ionic framework? The default text is inside the shadow root, so therefore the HTML element has a class of "select-placeholder" it cannot be accessed via traditional CSS.
framework.com/docs/api/select#css-custom-properties
The docs for ion-select mention to use custom properties but there are only two custom properties:
--placeholder-color
--placeholder-opacity
Both work fine for updating the color and opacity, but I would really like to specifically update font-weight and font-style, and there aren't custom properties for those.
The Ionic team mentions that if there are not custom properties, to "access the shadow root of the element and apply the styles yourself in JS." But they don't expand on how to do that.
How, specifically, can I add styles in the shadow root of Ionic components where a custom property is not supplied?
TLDR; Add the part attribute to the placeholder element inside the shadow dom and then style using ::part(thePartName) in css.
Here was my solution (I didn't love it). And by the way I am on Ionic 4.
So ultimately, the problem with styling elements inside the shadow DOM of certain ionic components, is that traditional CSS selectors from an outside* style stylesheet have zero affect on elements inside the shadow dom. This is one of the main points of the shadow DOM: to create encapsulated components where CSS doesn't leak in and doesn't leak out. There are two exceptions that I'm aware of:
1 - Use one of Ionic's CSS variables (aka CSS Custom Properties). These are limited to --placeholder-color in Ionic 4 and adding --placeholder-opacity in ionic 5. I happened to be on ionic 4 so i couldn't take advantage of the opacity variable. However to use these custom properties you would do so like this:
ion-select {
--placeholder-color: 'hotpink';
}
I needed to style font-weight, font-style, and opacity so I needed another solution other than CSS Custom Properties.
There is a second way to style elements inside the shadow dom and that is using the ::part() pseudo element.
html that lives in the shadow dom provided by Ionic:
<div part="SorryIonicDoesntAddThisAttribute" class="select-text select-placeholder>my text</div>
Your css:
::part(thePartName) {
opacity: 1;
font-style: italic;
font-weight: normal;
}
If the "part" HTML attribute exists on the element inside the shadow dom its like a portal into the shadow dom.
However in Ionic 4, Ionic doesn't add the part attribute to the ion-select component's elements in the shadow dom.
I used javascript to add it (inspired by #ivanreutkers comment) to add the part attribute so I could thus style it in CSS.
document.getElementById("the-id").shadowRoot.querySelector(".select-placeholder").setAttribute("part", "myPartName");
*Outside, meaning the stylesheet for my website/application and not the specific styles provided by Ionic that live inside the web component.
Try to add the following line in your app.scss file like this:
::ng-deep {
.select-text {
color: white;
...
}
}
I am setting up a project with React JS and want to use auth0 to handle authentication (and maybe some serverless functions).
auth0 provides a nice "seed" project https://github.com/auth0-samples/auth0-react-sample that works basically out of the box.
The code for the main container uses JSX and loads css style from a module file. The module file provides the className classes that are used for styling.
I am extending the bootstrap layout with React-Bootstrap components, and am able to style some components using classNames syntax.
For example, I am styling a Navbar's background color like this:
Appending to the css module file /01-Login/src/views/Main/styles.module.css
.mainNavBar{
background-color: rgb(45, 140, 210);
border-color: rgb(45, 140, 210);
}
Then to the file containing JSX 01-Login/src/views/Main/Container.js
<Navbar className={styles.mainNavBar} fixedTop>
...
</Navbar>
However, when I try to style other inner elements, ie the text color,
I tried:
.mainMenuItem {
color: #fff;
}
And:
<NavItem className={styles.mainMenuItem} eventKey={1} href="#">Link</NavItem>
It doesn't work. I think it is because I don't know how to reach the children of NavItem.
I tried this and variations of it:
.mainMenuItem ul > li > a {
color: #fff;
}
But it just doesn't seem to be the right way to do it, and doesn't work ( though an 'li' item got styled with the color at some point when inspected on the browser, but not the 'a' ...).
Finally, I tried inline styles (see related question Add inline style in reactjs without using JSX) but this seems to suffer from the same inheritance problem.
Thanks so much if you can point me in the right direction as I am confused.
Edit 19/07/2016
Looks like NavItem doesn't get the style elements...
I submitted an issue to react-bootstrap:
https://github.com/react-bootstrap/react-bootstrap/issues/2070
I used inline styles with javascript syntax with Radium instead of passing standard css with the "Classname" attribute.
I can't set the background color (or border color) of an input text, if it is a dojo datepicker.
My dojo datepicker is an input text with the two additional attribute:
dojoType="dropdowndatepicker"
displayFormat="yyyy-MM-dd"
I assume dojo has its own style, so even if I provide a style that specifies the background color, dojo overrides it.
something like this does not work:
<input type="text" ..other attributes.. style="width:5em;border:solid #FF0000;">
Any help is appriciated.
And may I just add that my dojo version is old as dirt ( will be upgraded) but currently I can't take advantage of the newer features like dijit, etc.
Dojo uses templates for most of their widgets. The HTML code you write (with dojoType attributes and stuff) is nothing more than a placeholder to configure your widget. Inline CSS applied to this HTML will be applied to the top level of your widget.
Your widget usually consists out of multiple HTML elements and so it may happend that the CSS you write inline, will not be applied to the correct element. Also, Dojo indeed uses themes (wich you usually define as a class="themename" on a parent tag (usually <body>) and most default themes of Dojo are using !important CSS lines for various features.
The best way is to inspect what HTML elements are created when you use a widget and to define a style on that specific element. But because the CSS attributes of the Dojo themes are using !important, it's recommended to be more specific than what they define. The easiest way is to add a custom classname to the <body> tag, for example:
<body class="claro custom">
</body>
Then define your style like:
.custom .dijitTextBox > .dijitInputField {
background-color: yellow;
}
.custom .dijitTextBox > .dijitArrowButton {
background: red;
}
I also made an example JSFiddle.
Have a look at this thread - i think this could help you out:
Changing default style of DOJO widget
Regards
add !important to the end of your rules:
<input type="text" ..other attributes.. style="width:5em !important;border:solid #FF0000 !important;">
This should apply stuff to the input. Please check if the element isn't replaced when dojo starts using it and if you are applying the style to the correct element.