I'm playing around with MaterialUI and I'm wondering how can I change the underline and text color of the Select component when an item is being selected? Currently, after I pick an option, the underline & label is blue while the background is gray. Is there a way I can customize the underline and label color?
I don't see an underline CSS API option in the documentation here so I'm a bit stumped as to where I can change these stylings.
Thanks for your help in advance!
The best way to achieve this is building your own theme using the theme provider as documented here
Themes Provider
You can also Override the style especially if you need to only change the behavior per component.
My advice is that you build your own theme(first one). you don't have to change everything too just the ones that you want to change the other styles will apply defaultly.
This is pretty hack-y but if you just want this done quick and dirty, you could add a rule in your CSS that uses fuzzy class selectors.
div[class="^=MuiInput-underline"]:hover:not(div[class="^=MuiInput-disabled"]):not(div[class="^=MuiInput-focused"]):not(div[class="^=MuiInput-error"]):before
Related
I am aware there are other similar topics on this, but I was wondering how to make my situation work. I have not been able to make it work with available information so far.
I am trying to modify the background color of a Text button when the mouse hovers.
If I change my backgroundColor style inline of the button, it changes the appropriate area entirely. It seems there are no way to add an :hover functionality inline (I am using TS, shows up as an error. Even though it compiles, it has no effect).
If I use a SCSS module, I can change again the whole background color. But if I change the same property with the :hover functionality, it only affects the text part (see screenshot).
I've tried targeting more specifically the ant-btn-text, but to no effect still.
Would someone have an idea? I would like to avoid creating a state variable for this.
Edit: added portion of code and CSS as requested in comment
AntD classes generally override your own css stying. You can use !important to override that.
Ok so I found it (only post it now as it was getting late local time).
So compared to my original post, the & parent selector was necessary, and also adding !important made the trick.
So in my case, having:
.updateButton {
&:hover:{
background-color: red !important;
}
}
overrode the default styling.
Thank you!
I'm trying to refine the Breeze Dark theme for konsole using custom CSS, but I cannot figure out the selector which gets picked when the konsole content changes and the tab get becomes highlighted (if you know what I mean; it merely means that the unselected tab text color gets changed when the content of the shell changes). Not hover though, as hovering works the over way.
Reading the official documentation doesn't clarify me (I suppose I'm using it wrong, but anyway). Does anyone know the name of the property/selector ?
Also, it would be nice if my custom CSS would be merged with teh default one, overriding only the things that I change, and leaving others intact. I expected this to be the default behavior, but seems like I'm wrong.
Here are some official examples for customizing QTabWidget.
Namely, you would need ::tab subcontrol and :selected pseudo state in your stylesheet. For example:
QTabBar::tab:selected {background: red;}
I recently have a problem with my application after I add/edit the theme.css file. Some of angular material style is not applied anymore such as position and animations and background color.
What I have done to the Theme.css file:
The original theme.css
After edit, trying to acheive different theme for different user.
After I have modified the theme, so now I can acheive that the app can change the color base on what class is defined in enviornment.ts file.
in app.component.html
however, problem come after.
all dialog/dropdown/datepicker/popup's background became transparent, So I define a class and force them to have a white background.
everything inside a dialog become abnormal, as picture shown below, all input/select has no border, and no material animation when click/active on the input field.
From the picture above, you will see the button has no color style even I have define them.
however, there is no problem if the input field is not in a dialog, you can see the style and animation is still applied as the picture shown below.
Anyone have experienced this? I have been trying to solve this problem for 4 days and still no clue about it.? I would be really thankful if someone could help me.
regard
This problem is because after we adding custom theme class, we have to configure the Overlaycontainer.
This link will help to solve this issue.
https://material.angular.io/guide/theming#multiple-themes
It's amazing how Angular can hide css, so I don't know how to change a certain color. I am using Angular with Prime ng, specifically I use <p-selectbutton> and I can't find how to change the background for the selected option. Where can I change this? I searched the whole project for the text 186ba0 which is the color for this background, and I couldn't find it! Anyway, this is the screenshot for the caught background CSS element:
Changing the original angular file's not a good practice. Did you try to override it using an !important statement?
If you did, try changing the original file, but beware, if you update your angular application, you'll lose this changes.
Can anybody help me. I would like to change the selected item color of select box from system generated dark blue color. Is it possible with css.I have tried different style properties such as background etc. But the color didn't changed.
It looks that you can customize the initial font, color, background, etc... but the pseudo classes hover or active don't appear to do anything...
You may be out of luck :(
The only other option that comes to mind is a roll-your-own drop down, wherein you could customize everything.
it looks that you can customize the initial font, color, background, etc... but the pseudo classes hover or active don't appear to do anything...
You may be out of luck :(
The only other option that comes to mind is a roll-your-own drop down, wherein you could customize everything