classnames material ui code example

Example 1: create a common style material ui style

const styles = theme => ({
  ...card(theme),
  grid: {
    height: '100%',
    width: 'fit-content',
    paddingLeft: theme.spacing.unit * 2,
    paddingRight: theme.spacing.unit * 2,
    flexWrap: 'nowrap',
    overflowY: 'hidden',
  },
  name: {
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    fontSize: '1.12rem',
    fontColor: theme.palette.text.main,
    [theme.breakpoints.down('sm')]: {
      fontSize: '0.9rem',
    }
  },
  state: {
    textOverflow: 'ellipsis',
    margin: '0 auto',
    marginTop: theme.spacing.unit / 2,
    fontSize: '1.0rem',
    fontColor: theme.palette.text.light,
    [theme.breakpoints.down('sm')]: {
      fontSize: '0.8rem',
    }
  },
  alarmArmedHome: {
    background: theme.palette.backgrounds.card.alarm.home,
  },
  alarmArmedAway: {
    background: theme.palette.backgrounds.card.alarm.away,
  },
  alarmTriggered: {
    background: theme.palette.backgrounds.card.alarm.triggered,
  },
  icon: {
    margin: '0 auto',
    color: theme.palette.text.icon,
    fontSize: '2.7rem',
    [theme.breakpoints.down('sm')]: {
      fontSize: '1.7rem',
    }
  },
});

Example 2: use theme in component mui

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

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.secondary.main
  }
}));

export default function App() {
  const classes = useStyles();
  return (
    

      
Hello CodeSandbox
      
Start editing to see some magic happen!
    
  );
}

Example 3: create a common style material ui style

const styles = (theme) => ({
  cardContainer: {
    position: 'relative',
    width: '50%',
    padding: theme.spacing.unit / 2,
  },
  cardOuter: {
    height: '100%',
    width: '100%',
    textAlign: 'start',
  },
  card: {
    width: '100%',
    background: theme.palette.backgrounds.card.off,
  },
  cardOn: {
    background: theme.palette.backgrounds.card.on,
  },
  cardUnavailable: {
    background: theme.palette.backgrounds.card.disabled,
  },
  cardContent: {
    display: 'flex',
    flexWrap: 'wrap',
    minHeight: 98,
    height: 98,
    [theme.breakpoints.down('sm')]: {
      minHeight: 74,
      height: 74,
    },
    padding: `${theme.spacing.unit * 1.5}px !important`,
  },
});

export default styles;

Example 4: use theme in class component material ui

import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  root: {
    backgroundColor: "red"
  }
});

class ClassComponent extends Component {
  state = {
    searchNodes: ""
  };

  render() {
    const { classes } = this.props;
    return (
      
Hello!
    );
  }
}

export default withStyles(styles, { withTheme: true })(ClassComponent);