I am using CSS in JS (JSS) with material-ui, it works fine, but i don't get what it's supposed to offer (more than style injection) in terms of features/coding facilities. I feel like i am missing something so i have some specific questions.
With the style injection, i can adapt the style to the context, for instance:
const buttonStyle = {
border: "2px solid black »,
borderRadius: "5px",
padding: "15px",
font-family: "15px",
font-size: "2em",
backbroundColor: "red"
};
if (success) {
buttonStyle.backgroundColor = "green";
}
With JSS, it looks like i need to "pre-build" the whole button style in its different potential colors:
const style = {
buttonSuccess: {
border: "2px solid black »,
borderRadius: "5px",
padding: "15px",
font-family: "15px",
font-size: "2em",
backbroundColor: « green »
},
buttonError: {
border: "2px solid black",
borderRadius: "5px",
padding: "15px",
font-family: "15px",
font-size: "2em",
backbroundColor: "red"
}
};
Is there any way to avoid to re-write the whole style when only one parameter is dynamic?
And another point, with JSS, it looks like we need to inject one class for each html element we need to style.
So if i have a table with 200 cells, am i supposed to add 200 classes into my DOM (when i could declare it only one time with a td selector in pure CSS)?
Is there a way to work with inherit style between parent and children components?
Because there is a dirty pattern i have written several time to merge a style i inject from the parent and the style the children compile by itself:
const styles = theme => ({
root: {
backgroundColor: "blue"
}
});
const childComponent = (props) => (
<div classeName={`${props.parentClass} ${props.classes}`} /> // See parentClass here
);
export default withStyles(styles)(childComponent);
Is there any way to avoid to re-write the whole style when only one parameter is dynamic?
Yes, see function values. http://cssinjs.org/json-api?v=v9.8.1#function-values
So if i have a table with 200 cells, am i supposed to add 200 classes into my DOM (when i could declare it only one time with a td selector in pure CSS)?
You can use '& td' selector, see jss-nested plugin, it is already built in.
http://cssinjs.org/jss-nested?v=v6.0.1
Is there a way to work with inherit style between parent and children components?
JSS doesn't modify inheritance model of CSS. I think you are trying to override a property that is defined by the core. Check out customization documentation https://material-ui.com/customization/overrides/
Related
It is clear from the official doc that I can change the header class using the "headerClass" prop.
However, I want to give the header a different style (specifically color) when its column is sorted.
Any advise about how to approach it?
For others who faced the same problem, you may change the following classes:
.ag-header-cell-sorted-asc {
color: blue;
font-weight: bold;
}
.ag-header-cell-sorted-desc {
color: red;
font-weight: bold;
}
I have a simple problem, but I may be asking for the impossible.
I want to style my html form elements as parallelograms without skewing the contained text. I would normally do this by applying the transform to a parent div and applying the reverse transform to the content:
http://jsfiddle.net/ExUs9/3/
form {
background:#62CAD9;
padding:10px;
}
div {
background: white;
height: 30px;
margin: 10px;
width:300px;
transform:skewX(30deg);
-ms-transform:skewX(30deg);
-webkit-transform:skewX(30deg);
}
input {
background: none;
width: 100%;
height: 100%;
border: none;
transform:skewX(-30deg);
-ms-transform:skewX(-30deg);
-webkit-transform:skewX(-30deg);
}
My problem with the above is the focus property is still applied to the unskewed input box and displays as rectangular. The focus effect is only skewed if the input box itself is skewed:
http://jsfiddle.net/kdqKX/
form {
background:#62CAD9;
}
input {
margin: 20px;
background: white;
width:300px;
border: none;
height: 30px;
transform:skewX(30deg);
-ms-transform:skewX(30deg);
-webkit-transform:skewX(30deg);
}
The problem here is that the text is skewed.
I know I could just remove the focus outline, but is there any way to either:
Skew the input box--but not the contained text--without skewing via a parent div
Apply the border to the parent div when the child input box is focused
I don't know js or any scripts well, so a script free solution is preferred. I do, though, suspect this is impossible in pure css, so let me know any possible solutions.
Thank you, you brave internet geniuses,
Dalton
The easy solution would be a background image.
CSS gradient can fake this.
background-image:linear-gradient(45deg, #62cad9 0 , #62cad9 2em , transparent 2em ,transparent 230px, #62cad9 230px );
Try it without transform. http://jsfiddle.net/khGDj/
other easy way, would have been width pseudo-element and borders/blue/transparent. input do not take it as far as i know.
I was creating a <div> tag in which I wanted to apply two classes for a <div> tag which would be a thumbnail gallery. One class for its position and the other class for its style. This way I could apply the style, I was having some strange results which brought me to a question.
Can two classes be assigned to a <div> tag? If so, which one overrules the other one or which one has priority?
Multiple classes can be assigned to a div. Just separate them in the class name with spaces like this:
<div class="rule1 rule2 rule3">Content</div>
This div will then match any style rules for three different class selectors: .rule1, .rule2 and .rule3.
CSS rules are applied to objects in the page that match their selectors in the order they are encountered in the style sheet and if there is a conflict between two rules (more than one rule trying to set the same attribute), then CSS specificity determines which rule takes precedence.
If the CSS specificity is the same for the conflicting rules, then the later one (the one defined later in the stylesheet or in the later stylesheet) takes precedence. The order of the class names on the object itself does not matter. It is the order of the style rules in the style sheet that matters if the CSS specificity is the same.
So, if you had styles like this:
.rule1 {
background-color: green;
}
.rule2 {
background-color: red;
}
Then, since both rules match the div and have exactly the same CSS specificity, then the second rule comes later so it would have precedence and the background would be red.
If one rule had a higher CSS specificity (div.rule1 scores higher than .rule2):
div.rule1 {
background-color: green;
}
.rule2 {
background-color: red;
}
Then, it would take precedence and the background color here would be green.
If the two rules don't conflict:
.rule1 {
background-color: green;
}
.rule2 {
margin-top: 50px;
}
Then, both rules will be applied.
Actually, the class that defined last in the css - is applied on your div.
check it out:
red last in css
.blue{ color: blue; }
.red { color: red; }
<div class="blue red">blue red</div>
<div class="red blue">red blue</div>
vs
blue last in css
.red { color: red; }
.blue{ color: blue; }
<div class="blue red">blue red</div>
<div class="red blue">red blue</div>
If you asking about they have same property then as per the CSS rule it's take the last statement.
<div class="red green"></div>
CSS
.red{
color:red;
}
.green{
color:green;
}
As per the above example it's take the last statement as per css tree which is .green.
The class that is defined last in the CSS have priority, if nothing else applies.
Read up on CSS priority to see how it works.
Many classes can be assigned to an element, you just separate them with a space
<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>
Because of the cascade in CSS, the overwriting rules closest the to bottom of the document will be applied to the element.
So if you have
.myClass
{
background: white;
color: blue;
}
.keepOnClassing
{
color: red;
}
The red color will be used, but not the background color as it was not overwritten.
You must also take into account CSS specificity, if you have a more specific selector, this one will be used:
.myClass
{
background: white;
color: blue;
}
div.myClass.keepOnClassing
{
background: purple;
color: red;
}
.stayClassySanDiego
{
background: black;
}
The second selector here will be used as it is more specific.
You can take a look at it all here.
I'm using GWT. I see that the gwt "clean" theme (the default one?) makes our body element have a 10px margin:
body {
color: black;
margin: 10px; <------
border: 0px;
padding: 0px;
background: #fff;
direction: ltr;
}
In my own css file, I set the margin to 0px, but it seems that GWT's keeps winning (maybe because it gets loaded last?).
What's the right way to override their setting?
Thanks
There are several possibilities:
You can use margin: 0px !important (this is the "brute-force" approach).
Or you can give your body a class like <body class="myApp">...</body>, and then in your CSS, use body.myApp { ... }. This will take precedence, because body.myApp is a more specific selector than body.
Or you can simply not use any theme at all (which is often a good idea if you want to create a fresh layout without worrying which attributes you'll have to override)
Another option is to load your css file by using clientbundle. (assume that playground.css is your css file)
public interface Resources extends ClientBundle {
public static Resources INSTANCE = GWT.create(Resources.class);
#Source("playground.css")
CssResource getPlaygroundCSS();
}
Note: playground.css is located in the same package as the Resources interface.
in the onmoduleload:
public class Playground implements EntryPoint {
#Override
public void onModuleLoad() {
Resources.INSTANCE.getPlaygroundCSS().ensureInjected();
Label lblHelloWorld = new Label("Hello World");
RootPanel.get().add(lblHelloWorld);
}
}
In the CSS:
body {
background-color: #FFFFD2 !important; }
works fine to change the background color.
is there a way to change global the selection color of gwt datagrid?
I added following css-format in the main-app-css file:
.dataGridSelectedRow {
background: #1EDA17;
color: white;
height: auto;
overflow: auto;
}
I have seen also following link:
http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideUiCss.html
Sadly my change had no effect.
Do I miss any setStyleName() call?
There is also another way of setting custom css formatting for selected row in DataGrid. You need to create your custom interface that extends DataGrid.Resources. In this interface you should ovveride method dataGridStyle() and in #Source annotaion put path to your custom css file.
For example:
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.DataGrid.Resources;
public interface CustomDataGridResources extends Resources {
public interface CustomDataGridResources extends Resources {
#Source({DataGrid.Style.DEFAULT_CSS, "resources/CustomDataGridStyles.css"})
CustomStyle dataGridStyle();
interface CustomStyle extends DataGrid.Style {
}
}
If you want just to change style for selected row then your css file will contain only:
.dataGridSelectedRow {
background: #1EDA17;
color: white;
height: auto;
overflow: auto;
}
But I also prefer to change cursor for howered row:
.dataGridHoveredRow {
cursor: pointer;
cursor: hand;
}
Look also at similar discussion.
For applying custom style to your DataGrid you can use grid's constructor
public DataGrid(int pageSize, Resources resources, ProvidesKey<T> keyProvider)
where Resource is an instance that implements your custom interface (in my case CustomDataGridResources).
DataGrid.Resources customDataGridResources = GWT.create(CustomDataGridResources.class)
The custom css will not work since GWT overrides it with clean.css. If you use FIREBUG or any other tool you might recognize it. The solution is simple. Add !important to each line which has not affected with your custom css
.dataGridSelectedRow {
background: #1EDA17 !important;
color: white !important;
height: auto !important;
overflow: auto !important;
}