Styles

Like our friends from Material UI, we've used JSS syntax to style (restyle) the material ui components.

A useful link about JSS is this one here.

We've decided to use the makeStyles function from Material-UI to override some of their styles. This is a React HOOK functions, which means that it can only be called from another React HOOK or a simple function. Read more about it here

All of the restyled components can be found in components.

components
  ├── Accordion
  │   └── Accordion.js
  ├── Badge
  │   └── Badge.js
  ├── Card
  │   ├── Card.js
  │   ├── CardAvatar.js
  │   ├── CardBody.js
  │   ├── CardFooter.js
  │   └── CardHeader.js
  ├── Clearfix
  │   └── Clearfix.js
  ├── CustomButtons
  │   └── Button.js
  ├── CustomDropdown
  │   └── CustomDropdown.js
  ├── CustomFileInput
  │   └── CustomFileInput.js
  ├── CustomInput
  │   └── CustomInput.js
  ├── CustomLinearProgress
  │   └── CustomLinearProgress.js
  ├── CustomTabs
  │   └── CustomTabs.js
  ├── CustomUpload
  │   └── ImageUpload.js
  ├── Footer
  │   └── Footer.js
  ├── Grid
  │   ├── GridContainer.js
  │   └── GridItem.js
  ├── Header
  │   ├── Header.js
  │   └── HeaderLinks.js
  ├── InfoArea
  │   └── InfoArea.js
  ├── Instruction
  │   └── Instruction.js
  ├── Media
  │   └── Media.js
  ├── NavPills
  │   └── NavPills.js
  ├── PageChange
  │   └── PageChange.js
  ├── Pagination
  │   └── Pagination.js
  ├── Parallax
  │   └── Parallax.js
  ├── Snackbar
  │   └── SnackbarContent.js
  ├── Table
  │   └── Table.js
  └── Typography
      ├── Danger.js
      ├── Info.js
      ├── Muted.js
      ├── Primary.js
      ├── Quote.js
      ├── Rose.js
      ├── Small.js
      ├── Success.js
      └── Warning.js

If you go to any of our components you will see that somewhere at the beginning of the file we import makeStyles from material-ui, then we import from scr/styles/jss/* the correspondig style for that component and after these imports, we use the makeStyles function alongside our styles to compile them to jss from javascript objects.

For a better way of understanding this variables, please take a look inside the styles/jss/*. You will see that all of the styles have a unique name that corresponds with the component name.

Besides this styles, we have styles/jss/nextjs-material-kit-pro.js with variables for styles, styles/jss/nextjs-material-kit-pro/pages/* used to style each page/view or add custom styles to our components on each view/page and styles/jss/nextjs-material-kit-pro/*.js are styles for components that weren't extended by us, we're using them like material-ui, but with our styles.

Beside this styles, because we've used some plugins in our demo, you will find some of our styles in assets/scss.