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 inside src/components (for example, the styles for the src/components/Sidebar/Sidebar.js will be inside src/assets/theme/components/sidebar.js)
  • src/assets/theme/layouts: styles for the components found inside src/layouts
  • src/assets/theme/views: styles for the components found inside src/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
}
...