Nextjs 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 thier 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.

We’ve also used withStyles function from Material-UI to override some of their styles. This was used for those components that could not be translated to hooks. Read more about it here.

All of the restyled components can be found in components.

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 assets/jss/* the corresponding style for that component and after these imports, we use the makeStyles function alongside our styles to compile them to jss from javascript objects. This is used in our functional components.

There are some components in which you will see that somewhere at the beginning of the file we import withStyles from material-ui, then we import from assets/jss/* the corresponding style for that component and at the end of the file, we export that component’s class/function with the withStyles function so that the imported style overrides the material-ui style. This is used in our class components, such as the Sidebar or Wizard ones.

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

Due to some complications we’ve had to keep in some components the withStyles functions from Material-UI.

FREE

Besides this styles, we have assets/jss/nextjs-material-dashboard.js with variables for styles and colors, assets/jss/nextjs-material-dashboard/views/* used to style each page/view or add custom styles to our components on each view/page and assets/jss/nextjs-material-dashboard/*.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/css.

The extended components are as follows (also check the left menu for them and their docs):

components
  ├── Card
  │   ├── Card.js
  │   ├── CardAvatar.js
  │   ├── CardBody.js
  │   ├── CardFooter.js
  │   ├── CardHeader.js
  │   └── CardIcon.js
  ├── CustomButtons
  │   └── Button.js
  ├── CustomInput
  │   └── CustomInput.js
  ├── CustomTabs
  │   └── CustomTabs.js
  ├── FixedPlugin
  │   └── FixedPlugin.js
  ├── Footer
  │   └── Footer.js
  ├── Grid
  │   ├── GridContainer.js
  │   └── GridItem.js
  ├── Navbars
  │   ├── AdminNavbarLinks.js
  │   ├── Navbar.js
  │   └── RTLNavbarLinks.js
  ├── PageChange
  │   └── PageChange.js
  ├── Sidebar
  │   └── Sidebar.js
  ├── Snackbar
  │   ├── Snackbar.js
  │   └── SnackbarContent.js
  ├── Table
  │   └── Table.js
  ├── Tasks
  │   └── Tasks.js
  └── Typography
      ├── Danger.js
      ├── Info.js
      ├── Muted.js
      ├── Primary.js
      ├── Quote.js
      ├── Success.js
      └── Warning.js

PRO

Besides this styles, we have assets/jss/nextjs-material-dashboard-pro.js with variables for styles and colors, assets/jss/nextjs-material-dashboard-pro/views/* used to style each page/view or add custom styles to our components on each view/page and assets/jss/nextjs-material-dashboard-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.

So you will find our color variables inside assets/jss/nextjs-material-dashboard-pro.js (for components extended from the Material-UI library), and inside assets/scss/nextjs-material-dashboard-pro/_variables.scss for those components that come as plugins to this template.

The extended components are as follows (also check the left menu for them and their docs):

components
  ├── Accordion
  │   └── Accordion.js
  ├── Badge
  │   └── Badge.js
  ├── Card
  │   ├── Card.js
  │   ├── CardAvatar.js
  │   ├── CardBody.js
  │   ├── CardFooter.js
  │   ├── CardHeader.js
  │   ├── CardIcon.js
  │   └── CardText.js
  ├── Clearfix
  │   └── Clearfix.js
  ├── CustomButtons
  │   └── Button.js
  ├── CustomDropdown
  │   └── CustomDropdown.js
  ├── CustomInput
  │   └── CustomInput.js
  ├── CustomLinearProgress
  │   └── CustomLinearProgress.js
  ├── CustomTabs
  │   └── CustomTabs.js
  ├── CustomUpload
  │   ├── ImageUpload.js
  │   └── PictureUpload.js
  ├── FixedPlugin
  │   ├── FixedPlugin.js
  │   └── FixedPlugin.js
  ├── Footer
  │   └── Footer.js
  ├── Grid
  │   ├── GridContainer.js
  │   └── GridItem.js
  ├── Heading
  │   └── Heading.js
  ├── InfoArea
  │   └── InfoArea.js
  ├── Instruction
  │   └── Instruction.js
  ├── NavPills
  │   └── NavPills.js
  ├── PageChange
  │   └── PageChange.js
  ├── Navbars
  │   ├── AdminNavbar.js
  │   ├── AdminNavbarLinks.js
  │   └── AuthNavbar.js
  ├── Pagination
  │   └── Pagination.js
  ├── Sidebar
  │   └── Sidebar.js
  ├── Snackbar
  │   ├── Snackbar.js
  │   └── SnackbarContent.js
  ├── Table
  │   └── Table.js
  ├── Tasks
  │   └── Tasks.js
  ├── Timeline
  │   └── Timeline.js
  ├── Typography
  │   ├── Danger.js
  │   ├── Info.js
  │   ├── Muted.js
  │   ├── Primary.js
  │   ├── Quote.js
  │   ├── Success.js
  │   └── Warning.js
  └── Wizard
      └── Wizard.js