React Storefront

Styling

React Storefront uses Material UI as the basis for all components. Material UI provides a styling solution based on JSS that allows you to override styles application-wide using a theme.

Theme

The theme is defined in components/theme.js and extends Material UI's default theme.

Component Styles

To style a component, use the useStyles hook:

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'

// declare style classes
const styles = theme => ({
  root: {
    color: 'red'
  }
})

// create the useStyles hook using material-ui's makeStyles
const useStyles = makeStyles(styles)

// define the component
export default function WarningLabel({ classes, children }) {
  // allow the user to pass in style overrides using the classes prop
  classes = useStyles(classes)

  // apply the root class
  return <div className={classes.root}>{children}</div>
}