I am using material-ui-dropzone to upload multiple files.
Is there any way to change the icon or color of the icon for each file?
Please give me suggestion to solve this problem.
Current situation -
Code example - Link
First if you see the example in the documentation https://react-dropzone.js.org/#section-previews
instead of using thumbnail use an icon from material UI and update the color programmatically.
Create a color pallet or a function that returns you the RGB programmatically. Then assign the color to each icon when you mount an icon component based on the number of file.
for simple one just create an array with color values:
const colorPallet = ['red', 'yello', 'green', ... ]
and assign the color in style <FileClipIcon style={{ color: colorPallet[index] }} />
otherwise write a function which returns you random RGB values between 0 to 255 and use that.
Related
I am new to material UI and react js, I just tried to add 2 buttons, one is with primary color, and another with Primary-light. How can I do that
I am using emotion library. This is what I tried it. I am not trying to change of the default color of primary-light, I wants to use the default primary-light color to my button
<Button variant="contained" >Primary Button</Button>
<Button variant="contained" color="secondary" >secondary Button</Button>
the above 2 buttons are working as expected.
<Button variant="contained" color="primary-light" >secondary Button</Button> //I know the syntax is wrong.
How to do this?
"primary-light" is not one of the supported colours by MUI buttons.
Which you can see in the documentation here here
You have a few options:
Manually override the style of this button. (not ideal).
Make a class that specifies the colour you want and provide the hex colour code as the background colour. (also not ideal).
Make a JSX class using makeStyles that takes the app's theme as an argument and provide the primary.light colour directly from your theme. (I'm not sure if this is outdated in version 5 of material UI but it is how you would usually do it in v4).
In your case it's probably easiest to take a quick look at the documentation Here Which shows how to customize colours on buttons using your theme and the styled function which is imported from mui/material/styles.
I had to create "primaryLight" color property in theme object so I could use. Also had to add types in order to Button can accept "primaryLight".
I used this document
A hacky workaround would be to use the defined theme color and then overwrite with sx prop.
<Button
color={'primary'}
variant='contained'
onClick={() => toggle(true)}
sx={{width: '100%', bgcolor: 'primary.dark', '&:hover': {bgcolor: 'primary.light'}}}
>
comments
</Button>
I believe this is prevented by design.
Button components are meant to get a color, and use the color main key.
You may use ButtonPropsColorOverrides to allow more color values, which is useful when you add more colors to the theme, but still - you'll get the color's main key, and cannot access other color keys.
I believe this design is meant to keep the color system integrity. You're not supposed to use primary.light key since it may be used for other effects (like hover).
Note that you can use inner color keys for some other components, like typography:
<Typography variant="body2" color="primary.light">Hello</Typography>
I want to show a multiline text so I use a span label. I am trying to set the font size from the gui but it does not change.
I also trying to set the color dynamicaly using the next code:
this.gui_Span_Info.getAllStyles().setFgColor(HTMLElement.COLOR_RED);
but nothing happens.
What should I do?
SpanLabel is a composite component which means it's built from 2 or more separate components one of which is a Container.
You can determine the UIID of the text using setTextUIID it defaults to the Label UIID.
I am trying to implement a finite number of colors (like square icons) on the Draftail editor itself. What will be the best way to approach this?
It should be similar to how Microsoft Word displays the font color or something along those lines.
Thanks in advance.
I'm not sure if it's the best approach but here is what I came up with:
https://gist.github.com/benoitvogel/46022124d46de03ed2078603fb24ca97
This defines a new inline style which encloses the selected text between <span class="mycustomclass"></span> (change feature_name according to the CSS class you want to use).
Then, you just have to define the corresponding .mycustomstyle CSS class in your frontend as usual:
.mycustomstyle {
color: purple;
}
You can also modify control['style'] to change the way this style will be displayed in the editor.
You will get 1 icon/label per CSS class, so it's not really like in Word as you won't get a proper selector. I haven't tried it myself, but according to Wagtail docs icon can reference SVG, so you might be able to display color squares instead of labels.
Hope it fits your needs.
I have an element of kind 'Ext.form.field.Text'.
I'd like to change the color of the input string in the text field.
Currently, the field is disabled and the text is being shown in a very light grey color, and I would like to change it to something diffrent.
I have tried:
<code>
field.setFieldStyle('color: red ;');
field.fieldCls = 'color: red ;';
field.cls = 'color: red ;'
</code>
All of the above had no effect on the field, or made influence on the frame around the field.
I would like to change only the text being filled in the field, nothing around...
Also, wanted to change the color of the label of the field by doing this:
<code>`field.setLabelCssCls('color: DarkSlateGrey ;');`</code>
And it had been successfully worked, looking for eqvivalent for the text itself.
To make input string colorful you need to add some css. In css you need to add the color which you want.
After that call this css in field.fieldCls property. This default CSS class for the field input.
Your css should be like :
.colorText{
color: red;
}
and after putting css call this css into field.fieldCls like
fieldCls: 'colorText',
I create a fiddler for you there you can check here. Fiddle
I would like to create a directive that can change the font color of the text displayed on a span based on some value that is not displayed. I have an array:
$scope.due =[{somedate: "April.8.2010"}, {past:"yes"}];
If the value of "past " is yes, then the value inside the span: <span>{{somedue.date}}</span> will be color red, else if "past" is no, then font color is black. I am new with angularjs so i would appreciate it if you can suggest on how can i do this using angularjs.
You can use ng-class
<span ng-class="{red: past == 'yes', black: past == 'no'}">{{somedue.date}}</span>
where the classes red or black will be applied. You can style those via CSS to make the color red / black.
Example: http://jsfiddle.net/TheSharpieOne/NHS73/
Your data structure was odd in your example, it has been modified in mine to showcase ng-class.
Also: You could use true / false and not need to do a string comparison to 'yes'/'no'.