Material-UI Styles
src/assets/scss/* FREE
Inside this folder you will find the styles for the
react-datetime
plugin.
src/assets/scss/* PRO
Inside this folder you will find all the styles of the Argon Dashboard PRO React product. We’ve had to add all of its styles, since the plugins for Argon Dashboard PRO Material-UI needed them.
src/assets/theme/*
Inside this folder, you will have all of the styles for this project.
-
src/assets/theme/components
: styles for the components found insidesrc/components
(for example, the styles for thesrc/components/Sidebar/Sidebar.js
will be insidesrc/assets/theme/components/sidebar.js
) -
src/assets/theme/layouts
: styles for the components found insidesrc/layouts
-
src/assets/theme/views
: styles for the components found insidesrc/views
ThemeProvider
We’ve used the ThemeProvider from Material-UI to add the base styles for components such as:
- Buttons
- Container
- Grid
- Input (FilledInput, OutlineInput etc.)
- Snakcbar (Alert)
- etc.
You can check our theme for the ThemeProvider inside
assets/theme/theme.js
.
Check out more about this component on the official Material-UI website: https://material-ui.com/styles/api/#themeprovider
CssBaseline
Material-UI provides a
CssBaseline
component to kickstart an elegant, consistent, and simple baseline
to build upon.
Check out more about this component on the official Material-UI website: https://material-ui.com/api/css-baseline/
createMuiTheme
We’ve used the
createMuiTheme
function to add our own JSS base code. Check it out inside
assets/theme/theme.js
.
Check out more about this component on the official Material-UI website: https://material-ui.com/customization/theming/#createmuitheme-options-args-theme
makeStyles
We’ve decided to use the
makeStyles
function from Material-UI to override some of their styles. This is
a React HOOK function, which means that it can only be called from
another React HOOK or a simple function.
Check out more about this component on the official Material-UI website: https://material-ui.com/styles/api/#makestyles-styles-options-hook
Example of usage
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
...
import componentStyles from "....";
const useStyles = makeStyles(componentStyles);
...
function Example(){
...
const classes = useStyles();
... you can now use classes.className
}
...
useTheme
We’ve decided to use the
useTheme
function from Material-UI so that we can access theme variables from
the above
ThemeProvider
(e.g
theme.palette.gray[600]
or
theme.palette.primary.main
). This is a React HOOK function, which means that it can only be
called from another React HOOK or a simple function.
Check out more about this component on the official Material-UI website: https://material-ui.com/styles/api/#usetheme-theme
Example of usage
// @material-ui/core components
import { useTheme } from "@material-ui/core/styles";
...
function Example(){
...
const theme = useTheme();
... you can now use theme.ThemeObject
}
...