i am using import { makeStyles } from '#mui/styles'
This is my theme typography config
enter image description here
This is file, i want to combine these 3 attributes into 1 line of code.enter image description here
Sorry that my English is not good, so it may cause misunderstandings for everyone. Looking forward to support
i want to combine these 3 attributes into 1 line of code
const a =
{
fontSize: theme.typography.text12Medium16.fontSize;
lineHeight: theme.typography.text12Medium16.lineHeight;
fontWeight: theme.typography.text12Medium16.fontWeight;
}
this is what you are passing to MuiDataGrid-main
and this is your text12Mediul16 object :
const text12Mediul16 =
{
fontSize: '12px',
lineHeight: '16px',
fontWeight: FONT_MEDIUM
}
and since :
theme.typography.text12Medium16.fontSize = '12px'
theme.typography.text12Medium16.lineHeight = '16px'
theme.typography.text12Medium16.fontWeight = FONT_MEDIUM
then a = text12Mediul16 so you can replace it like this :
'& .MuiDataGrid-main: theme.typography.text12Medium16'
and if your object contains other properties apart from fontSize, fontWeight and lineHeight that are not shown in your code example, then you can't do better than you did
Related
Hi guys I'm trying to remove or hide the last letter from List
Any possible ways?
Text(list[i].name,
style: GoogleFonts.poppins(
fontWeight: FontWeight.w400,
color:
list[i].isBook == "0"
? selectedTimingSlot[i] ? WHITE : BLACK
: Colors.grey.withOpacity(0.5),
fontSize: 15,
),
),
**Above code shows= "12:00 AM" I need to hide or remove "AM"**
Use substring method:
main() {
print("12:00 AM".substring(0,5));
}
Or with replaceAll method:
main() {
print("12:00 AM".replaceAll("AM","").replaceAll("PM",""));
}
with regular expression:
main() {
var regex = new RegExp(r'[a-zA-Z]');
print("02:00 AM".replaceAll(regex,""));
}
Ketan’s substring method is a terrible way of doing this, what about “9:00 PM”?
Edit: looks like his method worked perfectly!
Use regex and/or the following package:
https://pub.dev/packages/string_validator
The way I do it is with this extension
extension StringExtension on String {
String deleteLastChar({int toDelete = 1}) => substring(0, length - toDelete);
}
And you can use like
"12:00 AM".deleteLastChar(toDelete: 3) // Prints 12:00
Why toDelete: 3? Because you also want to remove the space between 12:00 and AM
In my flutter application I'm using qcf_bsml font, I have to generate the hex values to display the corresponding words in the font file. For that, I'm using this equation:
(64396 + Id >= 64434) ? 64429 + chapterId : 64396 + Id
I convert the result from above to hex value using this function:
calculatehex(){
final myInteger = (64396 + 1 >= 64434) ? 64429 + 1 : 64396 + 1; //Id is 1: result 64397
final hexString = myInteger.toRadixString(16);
final paddedString = hexString.padLeft(4, '0');
uppercaseString = paddedString.toUpperCase();
print(uppercaseString); //displays correct hex value in console :FB8D
}
The problem is I am only able to hardcode the hex value in text field to display the correct word. For example:
new Text('\u{FB8D}',textDirection: TextDirection.rtl,
style:TextStyle(fontSize:30.0, fontWeight: FontWeight.w100,fontFamily: 'QCF'),
textAlign:TextAlign.center ), // works fine
But if I use the variable name to display text, it displays the wrong word.
new Text(uppercaseString,textDirection: TextDirection.rtl,
style:TextStyle(fontSize:30.0, fontWeight: FontWeight.w100,fontFamily: 'QCF'),
textAlign:TextAlign.center ), // not showing correct word
I tried to concatenate the string like this, but still not working fine
new Text(r'\u{'+uppercaseString+'}',textDirection: TextDirection.rtl,
style:TextStyle(fontSize:30.0, fontWeight: FontWeight.w100,fontFamily: 'QCF'),
textAlign:TextAlign.center ),
Please help me understand why is it display the correct word with hardcoded value with '\u' but not with variable. Thank you
I solved it by using String.fromCharCode(int.parse()) & making following changes in the code:
uppercaseString = paddedString.toUpperCase();
finalhexString ='0x$uppercaseString';
then:
new Text(String.fromCharCode(int.parse(finalhexString)),textDirection: TextDirection.rtl,
style:TextStyle(fontSize:30.0, fontWeight: FontWeight.w100,fontFamily: 'QCF'),
textAlign:TextAlign.center ),
I need to spread common style across multiple styling inside makeStyles. This works for my jsx, but give errors when i move to tsx.
const abc = {
fontWeight: 600,
textTransform: 'uppercase',
}
const useStyles = makeStyles(() => ({
abcAdd: {
...abc,
color: '#B25846';
},
}))
If the object is declared in TypeScript, set its type to CSSProperties
import { CSSProperties } from "#material-ui/core/styles/withStyles";
const abc: CSSProperties = {
fontWeight: 600,
textTransform: 'uppercase',
}
Or, if the object came from JavaScript, cast it to CSSProperties
import { CSSProperties } from "#material-ui/core/styles/withStyles";
import { abc } from "./some/path/to/javascript";
const useStyles = makeStyles(() => ({
abcAdd: {
...abc as CSSProperties,
color: '#B25846',
},
}))
I found a simple workaround - add 'any' as type of callback function
const abc = {
fontWeight: 600,
textTransform: 'uppercase',
}
const useStyles = makeStyles((): any => ({
abcAdd: {
...abc,
color: '#B25846';
},
}))
And when you use the class, call it in quotes:
const classes = useStyles()
return (
<Box className={classes['abcAdd']}>
)
This way works for me and there are no errors from TS compiler.
I am sure, there could be a better solution, maybe you need to define some advanced type for callback. But it requires advanced knowledge of typescript, I'm not so experienced in it.
Any better solutions - welcome!
What about if you use #ts-ignore on that line?
There is no need to spread JSON inside makeStyles. There could be only one reason why you may want to spread it because you want to keep comment CSS in one file.
Simply make one comment file for common css:
import {
makeStyles,
} from '#material-ui/core';
const useCommonStyles = makeStyles(() => ({
abcAdd:{ fontWeight: 600,
textTransform: 'uppercase',}
}));
export default useCommonStyles;
And use it like this anywhere
import useCommonStyles from "src/utils/commonStyles";
const commonClasses = useCommonStyles();
How to change font size in p:chart bar jqplot-xaxis-tick? I use Primefaces 5.2 and overwrite style class not working.
According to JQPlot you can change the Font Size and Font Family: http://www.jqplot.com/examples/rotated-tick-labels.php
So in PF you can use the Chart Extender feature and do this...
JAVA:
final LineChartModel model = new LineChartModel();
model.setExtender("chartExtender");
JAVASCRIPT:
function chartExtender() {
this.cfg.axesDefaults = {
tickOptions: {
fontFamily: 'Georgia',
fontSize: '10pt',
angle: -30
}
};
}
I'm beginning to evaluate material-ui as an alternative for a project and I would like to know what is the recommended way to change the font size for a table.
Currently I'm playing with the component's sandbox (available at https://codesandbox.io/s/9onokxxn5w) but I couldn't find what to change in order to enlarge the font size.
I tried to change the theme in demo.js adding a fontSize key to the table element, as follows, but it didn't work:
const styles = theme => ({
root: {
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
},
table: {
minWidth: 700,
fontSize: '40pt'
},
});
Thanks in advance for any help in figuring this out.
It seems that it does not work for Table but it works for the TabelRow or for the TableCell.
Add a class to the TableRow element and set the fontSize param on it
...
<TableRow key={n.id} className={classes.tablecell}>
...
const styles = theme => ({
tablecell: {
fontSize: '40pt',
},
});