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
All of the restyled components can be found in src/components.
├── components
├── Badge
│ └── Badge.js
├── Card
│ ├── Card.js
│ ├── CardBody.js
│ ├── CardFooter.js
│ └── CardHeader.js
├── Clearfix
│ └── Clearfix.js
├── CustomButtons
│ └── Button.js
├── CustomDropdown
│ └── CustomDropdown.js
├── CustomInput
│ └── CustomInput.js
├── CustomLinearProgress
│ └── CustomLinearProgress.js
├── CustomTabs
│ └── CustomTabs.js
├── Footer
│ └── Footer.js
├── Grid
│ ├── GridContainer.js
│ └── GridItem.js
├── Header
│ ├── Header.js
│ └── HeaderLinks.js
├── InfoArea
│ └── InfoArea.js
├── NavPills
│ └── NavPills.js
├── PageChange
│ └── PageChange.js
├── Pagination
│ └── Pagination.js
├── Parallax
│ └── Parallax.js
├── Snackbar
│ └── SnackbarContent.js
└── Typography
├── Danger.js
├── Info.js
├── Muted.js
├── Primary.js
├── Quote.js
├── Small.js
├── Success.js
└── Warning.jsIf 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/assets/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 src/assets/jss/material-dashboard-react. You will see that all of the styles have a unique name that corresponds with the component name. You will also see that we've used some of that styles for src/views/* as well.