Adding margin via mui material ui

JavaScript
1

How to add margin via CreateTheme to a typography component in material UI (MUI)?

2

Not really sure what you are asking for but you can overwrite the styles.

const theme = createTheme({
  components: {
    // Name of the component
    MuiTypography: {
      styleOverrides: {
        root: {
          // Some CSS
          fontSize: "3rem",
          marginTop: "2rem"
        }
      }
    }
  }
});

But that seems like an odd thing to do.

1 Like
3

Hi Lasjorg sir, thanks for your reply sir , I got it

const theme=createTheme({
    typography:{
        allVariants:{
            fontFamily:'Raleway',
            textTransform:'none',
            fontSize:15,
        }
    },

I have seen people doing like this too while adding styles
The code you provided also modifies the typography component, the code I gave also modifies the typography component

In my one adding margin in the allVariants object isn’t possible , is there anything I need extra in this to add margin ?
Can you tell me the difference between your and the mine .Thank you so much sir

4

I don’t believe margin (spacing) is related to typography. If you look at the theme explorer you can see the properties. With the global overwrite you can add any styles to the component, even if they do not belong to the component base styles.

I haven’t used MUI much and it has been a long time since I used it. I know they have some spacing customization but I can’t say I remember how it really works. There is a Stack component you can add spacing to (and customize).

1 Like
5

Okay I got it thanks a lot sir , have a good day sir :blush:

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.