How to use @material-ui/styles - 10 common examples

/* eslint-disable max-len */
import React from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles(({ palette, shadows }) => ({
  root: {
    position: 'relative',
    paddingLeft: 16,
    paddingRight: 16,
    background:
      'linear-gradient(to right, #aea0d5, #eaafc8)' /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */,
    boxShadow: '0 0 20px 0 #f5005780',
    animation: 'mui-ripple-pulsate 1s infinite',
  },
  label: {
    color: palette.common.white,
    textTransform: 'none',
    fontSize: 15,
    fontWeight: 700,
  },
  contained: {

// @flow
import React, { useMemo } from "react"
import BaseCell from "../BaseCell"
import Select from "react-select"
import { grey, blue } from "@material-ui/core/colors"
import { makeStyles } from "@material-ui/styles"
import { softenColor } from "../../colors"

const useStyles = makeStyles({
  tagContainer: { display: "flex" },
  tag: {
    margin: 4,
    padding: 4,
    paddingLeft: 6,
    paddingRight: 6,
    borderRadius: 4
  }
})

export const customStyles = {
  container: provided => ({
    ...provided,
    border: "none",
    backgroundColor: blue[50]
  }),

import * as React from 'react';
import classNames from 'classnames';

import AppBar from '@material-ui/core/AppBar';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Toolbar from '@material-ui/core/Toolbar';
import TopBarContext from './TopBarContext';
import Typography from '@material-ui/core/Typography';

import {makeStyles} from '@material-ui/styles';

const DRAWER_WIDTH = 240;

const useStyles = makeStyles(theme => ({
  appBarSpacer: theme.mixins.toolbar,
  toolbar: {
    paddingRight: 24, // keep right padding when drawer closed
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    marginLeft: DRAWER_WIDTH,
    width: `calc(100% - ${DRAWER_WIDTH}px)`,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,

const LoginMenu: React.FunctionComponent = props => {
  const [t] = useTranslation();

  const theme = useTheme();

  const MobileButton = ({ openModal }) => (

import * as React from "react";
import { withRouter, RouteComponentProps } from "react-router-dom";
import makeStyles from "@material-ui/styles/makeStyles";
import createStyles from "@material-ui/styles/createStyles";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardContent from "@material-ui/core/CardContent";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import { LoginEntity, createEmptyLogin } from "../model/login";
import { isValidLogin } from "../api/login";
import { NotificationComponent } from "../common";

// https://material-ui.com/styles/api/#makestyles-styles-options-hook
const useStyles = makeStyles(theme =>
  createStyles({
    card: {
      maxWidth: 400,
      margin: "0 auto"
    }
  })
);

interface Props extends RouteComponentProps {}

const LoginPageInner = (props: Props) => {
  const [loginInfo, setLoginInfo] = React.useState(
    createEmptyLogin()
  );
  const [showLoginFailedMsg, setShowLoginFailedMsg] = React.useState(false);
  const classes = useStyles();

/>
    
  );
};

export const LoginPage = withRouter(LoginPageInner);

interface PropsForm {
  onLogin: () => void;
  onUpdateField: (string, any) => void;
  loginInfo: LoginEntity;
  loginFormErrors: LoginFormErrors;
}

// https://material-ui.com/styles/api/#makestyles-styles-options-hook
const useFormStyles = makeStyles(theme =>
  createStyles({
    formContainer: {
      display: "flex",
      flexDirection: "column",
      justifyContent: "center"
    }
  })
);

const LoginForm = (props: PropsForm) => {
  const classes = useFormStyles();
  const { onLogin, onUpdateField, loginInfo, loginFormErrors } = props;

  // TODO: Enhacement move this outside the stateless component discuss why is a good idea
  const onTexFieldChange = fieldId => e => {
    onUpdateField(fieldId, e.target.value);

/* Authentication progress */
import PropTypes from 'prop-types'
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { styled } from '@material-ui/styles'

import Spinner from 'components/Spinner'

import messages from './messages'

const Faint = styled('h1')({
  fontWeight: 'lighter',
  opacity: 0.6,
})

const Working = ({ children, ...props }) => (
  
    
    {children}
  
)

Working.propTypes = {
  children: PropTypes.node,
}

Working.defaultProps = {

async function renderWithSSR(
  appData: IAppData,
  assets: IAssets,
  location: string,
  context: object,
) {
  // await waitForAsyncFeaturesToConnect(appData, location);

  const sheets = new ServerStyleSheets();
  const app = sheets.collect(
    ,
  );

  const html = ;
  const document = `
    
    ${renderToString(html)}
  `;
  return document;
}

public static getInitialProps = async (ctx) => {
    // Render app and page and get the context of the page with collected side effects.
    const sheets = new ServerStyleSheets();
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => sheets.collect(),
      });

    const initialProps = await Document.getInitialProps(ctx);

    return {
      ...initialProps,
      // Styles fragment is rendered after the app and page rendering finish.
      styles: {sheets.getStyleElement()},
    };
  };

// 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets()
  const originalRenderPage = ctx.renderPage

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => sheets.collect()
    })

  const initialProps = await Document.getInitialProps(ctx)

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      
        {initialProps.styles}
        {sheets.getStyleElement()}