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

Question

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

Answer 1

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