In some of my containers I want to bind the padding and gap value to a variable so they are consistent throughout my application and I have the following code
<s:VGroup gap="{MyCSSStyle.space}"
paddingLeft="{MyCSSStyle.space}"
paddingRight="{MyCSSStyle.space}"
paddingTop="{MyCSSStyle.space}"
paddingBottom="{MyCSSStyle.space}">
However it is not good if I have to copy the inline styles everywhere, is it possible to bind the values in CSS such that I can achieve like this?
.myStyle {
gap: {MyCSSStyle.space};
paddingLeft: {MyCSSStyle.space};
paddingRight: {MyCSSStyle.space};
paddingTop: {MyCSSStyle.space};
paddingBottom: {MyCSSStyle.space};
}
<s:VGroup styleName="myStyle">
I tried but the complier do not allow me to do binding like that.
Binding of CSS is not possible in flex. Instead you can use actionscript to give css dynamically like following:
MXML:
<s:VGroup id="vgContainer" />
Script:
vgContainer.setStyle("paddingLeft",MyCSSStyle.space);
vgContainer.setStyle("paddingRight",MyCSSStyle.space);
vgContainer.setStyle("paddingTop",MyCSSStyle.space);
vgContainer.setStyle("paddingBottom",MyCSSStyle.space);
Hope, It will help.
Related
I have a Material UI component, and I am trying to custom style it using the CSS.
Following is the code:
<IconButton className="my-class">
<Close />
</IconButton>
CSS:
.my-class {
float: right;
margin-left: auto;
margin-right: 0;
}
But I am not able to style it, when I tried the following, it works:
<IconButton style={{ float: 'right', marginLeft: 'auto', marginRight: '0' }}>
<Close />
</IconButton>
Why I am not able to style the Material UI components using regular CSS?
Most CSS-in-JS solutions inject their styles at the bottom of the HTML <head>, which gives MUI precedence over your custom styles.
You need to use the StyledEngineProvider exported from #mui/material/styles with the injectFirst option, in order for the CSS injection order to be correct. It is explained here.
So something like this shoud work:
<StyledEngineProvider injectFirst>
<IconButton className="my-class">
<CloseIcon></CloseIcon>
</IconButton>
</StyledEngineProvider>
You can style MUI components using several ways like GlobalStyles API, sx, styled or even normal way.
If you are going to style the particular component like IconButton, and if you have a look at the document for the API, you can find the class names for the component.
Here's couple of references.
https://mui.com/customization/how-to-customize/#main-content
How to give conditional style to MUI TextField?
Is there any way to override a Material UI components styling without having to create a whole new component using withStyles()?
For instance, say I am rendering the following and I just want to change the color of the "Delete" label:
<div style={styles.rowFooter}>
<FormControlLabel
control={<ClearIcon />}
label="Clear"
title="Clear all fields."
onClick={clearFields}
/>
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
onClick={deleteRow}
/>
</div>
To do this, I'd usually have to:
Create a new styles function that returns { color: "maroon" }.
Create a new component to render the "Delete" button.
Wrap my new component withStyles(newStylesFn)(MyComponent).
But I don't want to do all of that. Is there any way to avoid it?
Update:
One way that I know of is to just pass a CSS className. I was looking for something besides that because it doesn't even work in this situation to override the nested element.
What I'd really like to be able to do is just pass style={{ color: "maroon" }}, but that only changes the color of the icon, not the actual label text...
You could use the classes prop to override styles provided by Material UI instead of className.
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
classes={{
label: 'labelStyle'
}}
/>
styles.css
.labelStyle {
color: maroon !important;
}
Although it's Not the perfect solution, it still does the job without using withStyles().
I have a PieChart... now that I'm moving to support tablets as well, I need to make the fontSize of the legend larger. However, the following has no effect:
<mx:Legend dataProvider="{industryChart}"
height="110" bottom="40"
height.groupTablets="220" bottom.groupTablets="80"
fontSize="8" fontSize.groupTablets="16"
markerHeight="10" markerHeight.groupTablets="20"
verticalGap="3"
/>
I know that the state is correct because the other attributes change.
I've also tried adding a style section:
<fx:Style>
.legend {
fontSize:24;
}
</fx:Style>
<mx:Legend dataProvider="{industryChart}"
height="110" bottom="40"
height.groupTablets="220" bottom.groupTablets="80"
markerHeight="10" markerHeight.groupTablets="20"
verticalGap="3"
styleName="legend"
/>
No change. Nor does it work if I move the style to Main.css.
Using this gives a warning: CSS type selectors are not supported in components: 'mx.charts.LegendItem':
<fx:Style>
#namespace mx "library://ns.adobe.com/flex/mx";
mx|LegendItem {
fontSize:24;
}
</fx:Style>
But if I put the same in Main.css, it does work:
#namespace mx "library://ns.adobe.com/flex/mx";
mx|LegendItem {
fontSize:24;
}
The problem I have with that is that I have to be able to make the font larger when in the tablet state, and not just for all states, or the font will be too large on a phone.
Pseudo-selectors don't appear to work:
mx|LegendItem:groupTablets {
fontSize:24;
}
IDs do not work, in either Main.cc or fx:Style:
#pieLegend {
fontSize:24;
}
<mx:Legend id="pieLegend"
dataProvider="{industryChart}"
height="110" bottom="40"
height.groupTablets="220" bottom.groupTablets="80"
markerHeight="10" markerHeight.groupTablets="20"
verticalGap="3"
/>
However, even if that approach worked it would have difficulties when the code behind the mxml needs to reference a particular component by id.
I even got frustrated and tried this in the code:
pieLegend.setStyle("fontSize", 24);
Nope. Grrrr.
Any ideas?
Caught the same issue. Here's from the adobe forum, might have to wait for apache flex for a real fix:
The problem is based on a bug that was deferred ( http://bugs.adobe.com/jira/browse/FLEXDMV-1656). There are several workarounds, but the simplest is to set the fontSize on the LegendItem type selector, like this:
<mx:Style>
LegendItem {
fontSize:24;
}
</mx:Style>
I am attempting to style the headers in a flex datagrid and I keep getting the warning:
Type DataGrid in CSS selector 'DataGrid' must be qualified with a namespace
What does this mean? I have gone through a bunch of tutorials and none of them have worked. It seems like changing a the colors in a datagrid should be relatively simple.
Here is a code sample:
<mx:Style>
.headerCustomStyle
{
fontWeight: "bold";
textAlign: "center";
color: #0000FF;
}
DataGrid {
alternating-item-colors: #F4FBFF, #FFFFFF;
}
</mx:Style>
<mx:DataGrid draggableColumns="true" width="100%" id="topTracks" headerStyleName="headerCustomStyle" dataProvider="{_trackData.track}" >
<mx:columns>
<mx:DataGridColumn id="artistName" dataField="artist.name" headerText="Artist" width="250" />
<mx:DataGridColumn id="trackName" dataField="name" headerText="Track" width="250"/>
</mx:columns>
</mx:DataGrid>
If you're using Flex 4, you need to define namespaces like this:
#namespace mx "library://ns.adobe.com/flex/halo";
#namespace s "library://ns.adobe.com/flex/spark";
#namespace tlf "library://ns.adobe.com/flashx/textLayout";
/* Halo DataGrid */
mx|DataGrid
{
...
}
/* Spark Button */
s|Button
{
...
}
They might be referring to that if you're using a new version of Flex/Flash Builder. Not sure if Flex 3 requires namespaces though.
Here's Adobe's doc on CSS Namespace Support
If you're using Flex 4, you normally DO NOT use CSS at all.
You think I'm telling tales?
Well, read this:
http://www.adobe.com/content/dotcom/en/devnet/flex/articles/migrating-flex-apps-part2.html
Port your Flex 4 applications to CSS-free code and you won't have any of these problems.
I'm not sure why its telling you that you need a namespace, but in your CSS, DataGrid is a type.
So try and give it the fully qualified namespace for DataGrid (mx.controls.DataGrid)
Does anyone know how to remove the default drop shadow from ApplicationControlBar?
I tried this but no luck:
<mx:Style>
global
{
dropShadowEnabled:false;
}
</mx:Style>
dropShadowEnabled can only be set in MXML mode but not in design mode. I don't know why it's not documented feature.
This works for me:
<mx:ApplicationControlBar width="80%" dropShadowEnabled="false">
<mx:Button label="Test"></mx:Button>
</mx:ApplicationControlBar>
At runtime:
applicationcontrolbar.setStyle('dropShadowEnabled',"false");