I use ready-made Angular components in my project. Some of the components use colors (see picture) that don't fit my project.
Instead of the purple, I want to use another color. I couldn't find anything in the Angular documentation to change the color.
https://material.angular.io/components/input/overview
I also didn't see a property in Chrome's Inspecter Tool to change the color.
How can I use a different color instead of the purple?
It would be best if you only have to change it in one place, as I use many other Angular components.
If you check the CSS for the placeholder text in the browser inspector, you should see the associated CSS that you should be able to copy to your code and change. Below is what I copied when I went to https://material.angular.io/components/input/overview and inspected (and even changed). If you decided to add this CSS as is to your Angular app, be sure to change the encapsulation option to ViewEncapsulation.None to see the effect. This is if you're using Angular Material v15; otherwise, inspect and see the associated CSS.
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
color: orange;
}
Related
I am relatively new to using angular material and it has taken a bit more work to use than I have faced using some other css frameworks like PrimeNG, Fomantic/Semantic UI. Most recently I have used PrimeNG which optionally comes with its own suite of utility classes in the form of the primeflex package. It does not appear that material has this (due to them leaving it up to you to decide i suppose) and I am therefore opting to use primeflex WITH angular material components. Is there an existing suite of material css classes that i can use instead, like simple classes that just give flex styles, height: 100%, etc.
My other problem is that I would like to tap into material in order to give my components background/font color styling relative to the current theme but I have not been able to find a 'helper class' that applies the current primary/accent/warn color to an element given the current theme. Any references to documentation are highly appreciated.
I assumed it would look something similar to:
// my-theme.css
#use '#angular/material' as mat;
.my-primary-text-class {
color: mat.$primary-text-color
}
or something similar?
I am working with a freelance client on the side that wants to utilize Angular Material throughout the project. However, they do not like the way that the underline looks in the angular material input. I have tried a variety of approaches to change this, but I haven't found any success yet.
To be honest, I haven't even been able to find the tag in the DOM that would let me alter that border.
Here are the Angular Material docs, as you can see all of the available options have at least some form of a bottom border.
Some approaches I've tried:
This one is from the old angular material and no longer works for the new angular material
The accepted answer here is for the new angular material, but I was not able to get it to work. I implemented exactly as described and no styling changed.
This approach looked like it would work. Unfortunately, I could not get it to work either.
Any help or input on this topic would be appreciated.
For reference, the client said that any changes that deviated from the desired design would be denied. So I have to get this to work. I believe I could maybe, possibly lobby to build a custom input component as a solution, but I know that they are dead set on Angular Material.
Edit. Added a pic of desired look:
this little code did it for me. I didn't want to display it and just set height and width to 0.
::ng-deep .mat-form-field-underline{
height:0 !important;
width:0 !important;
}
However I think its kinda hard to style the Angular Material Components and for me its sometimes better to built my own.
First of all, you'll need a .scss to be imported either within the default theme.scss or after the import of the material stylesheet in main.scss.
Now, Material offers you the option of customising colours and some of the styles by overriding their #mixins found somewhere in the Material folder ( I don't have the folder in front of me.. very sorry for the vague pointing... ).
Back to the newly added file; You can override material's default styling by checking the DOM for certain classes and then adding them in said file with the desired changes. Because the file is loaded after Material's, the default styling in overridden. Same thing applies for the #mixin you chose to override. Just have a look in the file, copy-paste the whole #mixin and change accordingly.
Now if you wish to go even further, my colleagues and I have a custom library that uses Material BUT the whole styling is stripped off leaving you with the bear input within the mat-form-group and then using a <input disabled/> with a position:absolute over it. That way you get to benefit from material without using their style.
I have a problem when using md-buttons, md-select or md-field in a vue project created by the vue CLI from the webpack template.
I have a MWE of the situation here, featuring the three introduction examples from the vue material website on each type of form item combined with the vue-cli template. It doesn't look very nice, but if you run it it breaks down as follows:
The first row are a set of radio buttons; however, the buttons are invisible (yet you can click on them, get a ripple effect and the correct value is recorded by vue)
Next is a select box; however, the background of the box is transparent.
Finally there are a few text boxes; however, the outlines seem to be transparent.
I can solve the issue with the select boxes by inserting a style block
<style>
.md-menu-content-container {
background-color: white;
}
</style>
and that will make md-select work as expected. I still decided to include it here, because it seems related to the other issues and may have a common origin.
Unfortunately, I have not figured out how to solve the other issues yet or which attribute to modify to "patch" the problem. So any help or pointers are highly appreciated.
It appears that when using he latest version of vue-material, the default template has to be loaded explicitly. Hence adding
import 'vue-material/dist/theme/default.css'
to the main.js file from vue-cli seems to fix this issue.
I'm using office-ui-fabric-react for my app, and I'm using the loadTheme to customize the color palette of my app.
Using loadTheme does change how my components behave but it doesn't affect the page's global CSS, like page background etc...
Given the fact that I also import the office-ui-fabric dist CSS, I would expect the CSS to be changed too, maybe through some CSS3 variables.
Is this not how it's supposed to work? should I set CSS manually on every loadTheme call?
I answered this on our Github page, but wanted to toss it in here too:
https://github.com/OfficeDev/office-ui-fabric-react/issues/5713
loadTheme only updates the theme object passed down to each component. It doesn't add any css to the page. This is very intentional.
I have some buttons that I would like to change the color of but not sure how to do it.
code:
<Button id="evalPriceButton" text="Evaluate Price" icon="sap-icon://sales-order" type="Accept" press="onPricePress" />
As shown in my code I'm using one of the default types provided by sap, but I cannot set my own color. I'm also using one of the icons provided in their library which shows different buttons with different colors, but they don't specify how to change those colors. https://sapui5.hana.ondemand.com/iconExplorer.html
I want it to look like the green one.
Is it fully necessary to override the css in order to change the look of the button?
I assume by "like the green one", you mean one of the colors of those rotating divs in the Icon Explorer. Unfortunately, those colors come from custom CSS classes. They are not specified in the documentation. So yes, you will have to:
Use the UI Theme Designer
Write your own CSS class although it is not recommended for Fiori apps
SAP Fiori launchpad apps should not override styles.
You can read more about the theming here: https://ui5.sap.com/#/topic/497c27a8ee26426faacd2b8a1751794a