Style declarations

After the imports, we will define CSS styles utilizing the Material-UI theme variables as required to style the elements in the component. For the Home component in Home.js, we have the following styles.

mern-skeleton/client/core/Home.js:

const styles = theme => ({
  card: {
    maxWidth: 600,
    margin: 'auto',
    marginTop: theme.spacing.unit * 5
  },
  title: {
    padding:`${theme.spacing.unit * 3}px ${theme.spacing.unit * 2.5}px 
    ${theme.spacing.unit * 2}px`,
    color: theme.palette.text.secondary
  },
  media: {
    minHeight: 330
  }
}) 

The JSS style objects defined here will be injected into the component and used to style the elements in the component, as shown in the following Home component definition.

Material-UI uses JSS, which is a CSS-in-JS styling solution to add styles to the components. JSS uses JavaScript as a language to describe styles. This book will not cover CSS and styling implementations in detail. It will most rely on the default look and feel of Material-UI components. To learn more about JSS, visit http://cssinjs.org/?v=v9.8.1. For examples of how to customize the Material-UI component styles, check out the Material-UI documentation at https://material-ui-next.com/.