I created a demo using react+materialUI and I'm using the Table Component with a custom theme applied.
I'm testing if the correct color (the one from my theme) is appplied, but the 'toHaveStyle' is getting the first class applied (the default from MaterialUI), not the one my theme overrides. The output:
Expected
-- color: rgb(3, 64, 187);
++ color: rgba(0, 0, 0, 0.87);
Here's the demo:
https://codesandbox.io/s/quizzical-wozniak-c62l0
Any help would be much appreciated, thanks!
It's seems that you are applying your theme colour correctly. Your class header is override the main colour from TableCell component. Do you want all table content colour with the primary one?
Related
I'm trying to remove the underline that shows in a TextField in codenameone.
'''
TextField username = new TextField("", "", 20, TextArea.USERNAME);
'''
What you're seeing there is the platform look and feel. So on iOS theme this will look different. Technically this is the border so you can just override it e.g. in CSS with:
border: none;
But this is the WRONG SOLUTION!
The right solution would be:
username.setUIID("MyTextField");
Which will let you explicitly specify in the theme how the component will look and give you 100% full control over the look of the component.
I am trying to customize the paper component to have a width of the full viewport. To be very frank I have a lot such problems if I try to customize any small details.
What I want to be able to do is customize the css that is being shown in the inspect element. In this particular case customize MuiBox-root-138 to have a padding of 0.
const styles = theme =>({
root:{
padding: 0,
width:"100%"
}
});
This doesn't work
What would be the elegant way of manipulating inner components of a MUI component.
Thanks!
I had the same issue, I tried different ways and this worked:
minWidth:"100% !important",
maxWidth:"100% !important",
I'm not sure if it's the same for you but it works.
I have an Antd checkbox that I'm trying to make larger, alter the thickness of the box itself and change the color to black but every style I apply creates a second square that sits over the checkbox and doesn't change the checkbox itself. Does anyone have any ideas on how to do this?
Figured this out by using &&&{border: 2px solid ${({ theme }) => theme.colors.black} the triple ampersand allows you to add more specificity when working with mixed styled components like mine.
My users are complaining that the change in color for md-buttons on focus is too subtle.
What is the right way to make an adjustment to this for the default color palettes?
Append: I am looking on how to adjust the button styling when the button has focus, not looking for how to create my own theme.
Also, I am using Angular-Material 1, NOT 2
OK, for anyone else looking for this, I found the answer in angular-material.modules.closure.button and angular-material.modules.js.button
.md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]):hover {
background-color: '{{primary-600}}'; }
.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]).md-focused {
background-color: '{{primary-600}}'; }
This tells me what I needed, which is that focused buttons get primary-600.
NOW I can customized the theme palletes as recommended in the first comment
There is simple form and some textfields on this form. I have to set colors
(background and font) in two of them on runtime.
I tried to do it two ways:
1) fieldInstance.addClass('aaa') with css like this
.aaa .x-form-field {
background-color: black;
color: red;
}
2) fieldInstance.setFieldStyle('font-weight: bold;color: red;background-color: black;');
both methods are working because I see the bottom age of both is
fields is thick in black color, and both fields are working the same (almost) way.
Before enter and after exit background color is white.
When I start to edit this fields, background of first
is always white, background of the second is black until
I leave the field.
Could you explain me whats wrong?
For <input> element applied many classes beside x-form-field, like x-form-text and some of them define color and background-color aswell. So I guess that some of that classes may be more specific than .aaa .x-form-field. Try to use !important within your CSS rules:
.aaa .x-form-field {
background-color: black !important;
color: red !important;
}
I think that the 1st function append a class to the Others already presents.
In the second case you replace values of style already setted.
Maybe to have the same issue you need to modify the x-form-field fields, instead of append Others.
I Always use the second option if i have to modify style on Runtime.
maybe posting other code i can see better where the problem could present