Please enable JavaScript.

Coggle requires JavaScript to display documents.

MaterialUI - Coggle Diagram

- - - - makeStyle
    - - what is it
        
        passing fun to makeStyle
        
        allows props
      - why
        
        dynamic styling
  - - - what is it
        
        place where MuiThemeObject lies
      - how to use it
        
        basic Provider concept
        
        wrap it to root component
    - - what is it
        
        function that hosts your theme
        
        you define what the theme is here
      - contains
        
        ThemeConfigurationVariables
    - - what is it
        
        variables that is safe to be theme`ed
      - why
        
        not everything is safe to be themed
        
        or even necessary to be themed
      - examples
        
        palette
        
        typography
- - - - Grid xs, sm, md, lg, xl
    - - show different layout at different size
      - example
        
        on mobile
        
        grid takes 2 space
        
        on pc
        
        grid takes 4 space
  - - - what to do here
        
        define breakpoints
    - - what to do here
        
        theme based on breakpoint
      - how to implement
        
        "theme.breakpoints.only('sm'): {backgroundColor: ""}"
        
        pass a function to the makeStyle, props is theme