@material-ui/styles#makeStyles TypeScript Examples

generateClassDefinitionsBasedOnRules = (rules) => {
    const classes = {};
    rules.forEach((rule, i) => {
        if (rule['customization'] == 'cell color') {
            classes['& .rule' + i] = {
                backgroundColor: rule['customizationValue']
            }
        }
        if (rule['customization'] == 'cell text color') {
            classes['& .rule' + i] = {
                color: rule['customizationValue'],
                fontWeight: "bold"
            }
        }
        if (rule['customization'] == 'row color') {
            classes['& .rule' + i] = {
                backgroundColor: rule['customizationValue']
            }
        }
        if (rule['customization'] == 'row text color') {
            classes['& .rule' + i] = {
                color: rule['customizationValue'],
                fontWeight: "bold"
            }
        }
    });
    return makeStyles({
        root: classes,
    });
}

useStyles = makeStyles((_theme) => ({
  header: {
    fontSize: 24,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 12,
    fontStyle: 'italic',
    textAlign: 'center',
    marginBottom: 8,
  },
}))

useStyles = makeStyles(
  () => ({
    root: {
      borderRadius: 45,
      height: 45,
      maxWidth: 400,
      position: 'relative',
    },

    disabled: {
      opacity: 0.3,
      pointerEvents: 'none',
    },

    loader: {
      left: '50%',
      position: 'absolute',
      transform: 'translateX(-50%)',
    },
  }),
  { name: 'PayPalButton' },
)

useStyles = makeStyles((_theme) => ({
  label: {
    flexGrow: 1,
  },
  button: {
    width: 140,
  },
  optionContainer: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'nowrap',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },

  portalIframe: {
    width: '100%',
    height: '100%',
  },
}))

useStyles = makeStyles((theme: Theme) => createStyles({
  wrapper: {
    transition: "all 0.3s linear",
  },
  highlight: {
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(2),
  }
}))

useStyles = makeStyles(
    createStyles({
        buttonProgress: {
            color: green[500],
            position: 'absolute',
            top: '50%',
            left: '50%',
            marginTop: -12,
            marginLeft: -12,
        },
    }),
)

useStyles = makeStyles((theme: typeof CustomTheme) => ({
  root: {
    paddingTop: 56,
    height: '100%',
    [theme.breakpoints.up('sm')]: {
      paddingTop: 64,
    },
  },
  shiftContent: {
    paddingLeft: 240,
  },
  content: {
    height: '100%',
  },
}))

useStyles = makeStyles((_theme) => ({
  menuButtonRoot: {
    backgroundColor: '#313131',
    color: '#1976d2',
    '&:hover': {
      backgroundColor: '#515151',
    },
  },
}))

useStyles = makeStyles({
  root: {
    display: 'inline-block',
  },
})

useStyles = makeStyles((_theme) => ({
  root: {
    margin: '0 0 0 0',
  },
  dropzoneButtonRoot: {
    backgroundColor: '#313131',
    color: '#1bb76e',
    '&:hover': {
      // Subclass which applies when hovering.
      backgroundColor: '#616161',
    },
    fontSize: 0,
  },
  dropzoneButtonText: {
    fontSize: 'inherit',
  },
  dropzoneButtonLabel: {
    flexDirection: 'column',
  },
  dropzoneButtonRootDragActive: {
    borderRadius: '24px',
    borderWidth: '2px',
    borderStyle: 'dashed',
    borderColor: '#1bb76e',
    padding: 20,
    flexGrow: 1,
    fontSize: 12,
  },
  imageUploadMessage: {
    flexGrow: 1,
    width: '100%',
    fontSize: '0.8em',
  },

  mediaUrlTextField: {
    flexGrow: 1,
    marginRight: 4,
    fontSize: 0,
  },

  animationMediaUrlTextField: {
    width: 0,
    opacity: 0,
    overflow: 'hidden',
    flexGrow: 0,
    fontSize: '1em',
  },

  animationMediaUrlTextFieldHelperText: {
    width: 0,
    opacity: 0,
    // height: 0,
    whiteSpace: 'nowrap',
  },

  animationOff: {
    '-webkit-transition': 'all 0s',
    '-moz-transition': 'all 0s',
    '-o-transition': 'all 0s',
    transition: 'all 0s',
  },
  animationOn: {
    '-webkit-transition': 'all 0.5s',
    '-moz-transition': 'all 0.5s',
    '-o-transition': 'all 0.5s',
    transition: 'all 0.5s',
  },
}))

useStyles = makeStyles((theme: typeof CustomTheme) => ({
  root: {
    padding: theme.spacing(4),
  },
}))

useStyles = makeStyles({
    gridCard: {
        width: '100%',
    },
})

useStyles = makeStyles((theme: typeof CustomTheme) => ({
  root: {
    padding: theme.spacing(4),
  },
}))

useStyles = makeStyles({
    gridCard: {
        width: '100%',
    },
})

useStyles = makeStyles((_theme) => ({
  iconBorder: {
    position: 'absolute',
    top: -1,
    left: -37,
    width: 80,
    height: 80,
    /* This URL MUST start with a '/' to indicate it is an absolute URL. */
    background: ({ bgImage }: StyleProps) => `url(${bgImage}) no-repeat`,
    backgroundSize: '100% 100%',
  },
  icon: {
    position: 'absolute',
    top: '2px !important',
    left: '2px !important',
  },
  label: {
    textAlign: 'center',
    fontSize: 14,
  },
  featureRoot: {
    // Position relative so the frame image can be positioned absolutely.
    position: 'relative',
    // Make space for the image.
    margin: '0 0 10px 37px',
    width: 'calc(100% - 43px)',
    height: 74,
    // Prevent the box getting squished.
    flexShrink: 0,

    border: '1px solid #d2c6bb',
    color: '#78583d',

    background: 'linear-gradient(270deg, #ffffff -95.11%, rgba(255, 255, 255, 0) 100%), #f0e9e2',

    // Align the text.
    padding: '0 8px 0 48px',

    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',

    fontSize: 18,
    boxSizing: 'border-box',
  },

  progressRoot: {
    height: 12,
    borderRadius: 6,
  },
  progressBar: {
    borderRadius: 6,
  },
}))

useStyles = makeStyles(styles)

useStyles = makeStyles({
    fullWidth: {
        width: '100%',
    },
})

useStyles = makeStyles((theme: typeof CustomTheme) => ({
  root: {
    backgroundColor: theme.palette.background.default,
    height: '100%',
  },
  grid: {
    height: '100%',
  },
  quoteContainer: {
    [theme.breakpoints.down('md')]: {
      display: 'none',
    },
  },
  quote: {
    backgroundColor: theme.palette.background.default,
    height: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundImage: 'url(/images/auth.jpg)',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
  },
  quoteInner: {
    textAlign: 'center',
    flexBasis: '600px',
  },
  quoteText: {
    color: theme.palette.common.white,
    fontWeight: 300,
  },
  name: {
    marginTop: theme.spacing(3),
    color: theme.palette.common.white,
  },
  bio: {
    color: theme.palette.common.white,
  },
  contentContainer: {},
  content: {
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
  },
  contentHeader: {
    display: 'flex',
    alignItems: 'center',
    paddingTop: theme.spacing(5),
    paddingBototm: theme.spacing(2),
    paddingLeft: theme.spacing(2),
    paddingRight: theme.spacing(2),
  },
  logoImage: {
    marginLeft: theme.spacing(4),
  },
  contentBody: {
    flexGrow: 1,
    display: 'flex',
    alignItems: 'center',
    [theme.breakpoints.down('md')]: {
      justifyContent: 'center',
    },
  },
  form: {
    paddingLeft: 100,
    paddingRight: 100,
    paddingBottom: 125,
    flexBasis: 700,
    [theme.breakpoints.down('sm')]: {
      paddingLeft: theme.spacing(2),
      paddingRight: theme.spacing(2),
    },
  },
  title: {
    marginTop: theme.spacing(3),
  },
  socialButtons: {
    marginTop: theme.spacing(3),
  },
  socialIcon: {
    marginRight: theme.spacing(1),
  },
  sugestion: {
    marginTop: theme.spacing(2),
  },
  textField: {
    marginTop: theme.spacing(2),
  },
  signInButton: {
    margin: theme.spacing(2, 0),
  },
}))