material-uitypographyreact-tsxmakestyles

Is there a way to combine these 3 attributes into 1 line of code?


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


Solution

  • 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