@material-ui/styles#makeStyles TypeScript Examples

The following examples show how to use @material-ui/styles#makeStyles. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ReportRuleEvaluator.ts    From neodash with Apache License 2.0 6 votes vote down vote up 
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,
    });
}
Example #2
Source File: ControlsTabSummary.tsx    From Teyvat.moe with GNU General Public License v3.0 6 votes vote down vote up 
useStyles = makeStyles((_theme) => ({
  header: {
    fontSize: 24,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 12,
    fontStyle: 'italic',
    textAlign: 'center',
    marginBottom: 8,
  },
}))
Example #3
Source File: PaypalButton.tsx    From storefront with MIT License 6 votes vote down vote up 
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' },
)
Example #4
Source File: BifrostMigrator.tsx    From Teyvat.moe with GNU General Public License v3.0 6 votes vote down vote up 
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%',
  },
}))
Example #5
Source File: ServerListItem.tsx    From shadowsocks-electron with GNU General Public License v3.0 6 votes vote down vote up 
useStyles = makeStyles((theme: Theme) => createStyles({
  wrapper: {
    transition: "all 0.3s linear",
  },
  highlight: {
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(2),
  }
}))
Example #6
Source File: FetchVariationsButton.tsx    From prompts-ai with MIT License 6 votes vote down vote up 
useStyles = makeStyles(
    createStyles({
        buttonProgress: {
            color: green[500],
            position: 'absolute',
            top: '50%',
            left: '50%',
            marginTop: -12,
            marginLeft: -12,
        },
    }),
)
Example #7
Source File: Main.tsx    From knests with MIT License 6 votes vote down vote up 
useStyles = makeStyles((theme: typeof CustomTheme) => ({
  root: {
    paddingTop: 56,
    height: '100%',
    [theme.breakpoints.up('sm')]: {
      paddingTop: 64,
    },
  },
  shiftContent: {
    paddingLeft: 240,
  },
  content: {
    height: '100%',
  },
}))
Example #8
Source File: ControlsSummaryFeatureMenu.tsx    From Teyvat.moe with GNU General Public License v3.0 6 votes vote down vote up 
useStyles = makeStyles((_theme) => ({
  menuButtonRoot: {
    backgroundColor: '#313131',
    color: '#1976d2',
    '&:hover': {
      backgroundColor: '#515151',
    },
  },
}))
Example #9
Source File: ShareButton.tsx    From binaural-meet with GNU General Public License v3.0 5 votes vote down vote up 
useStyles = makeStyles({
  root: {
    display: 'inline-block',
  },
})
Example #10
Source File: ControlsEditorImageUploader.tsx    From Teyvat.moe with GNU General Public License v3.0 5 votes vote down vote up 
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',
  },
}))
Example #11
Source File: Footer.tsx    From knests with MIT License 5 votes vote down vote up 
useStyles = makeStyles((theme: typeof CustomTheme) => ({
  root: {
    padding: theme.spacing(4),
  },
}))
Example #12
Source File: VariationsCollection.tsx    From prompts-ai with MIT License 5 votes vote down vote up 
useStyles = makeStyles({
    gridCard: {
        width: '100%',
    },
})
Example #13
Source File: admin.tsx    From knests with MIT License 5 votes vote down vote up 
useStyles = makeStyles((theme: typeof CustomTheme) => ({
  root: {
    padding: theme.spacing(4),
  },
}))
Example #14
Source File: ExampleCollection.tsx    From prompts-ai with MIT License 5 votes vote down vote up 
useStyles = makeStyles({
    gridCard: {
        width: '100%',
    },
})
Example #15
Source File: ControlsSummaryFeature.tsx    From Teyvat.moe with GNU General Public License v3.0 5 votes vote down vote up 
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,
  },
}))
Example #16
Source File: CookieConsenter.tsx    From clearflask with Apache License 2.0 5 votes vote down vote up 
useStyles = makeStyles(styles)
Example #17
Source File: PromptEditor.tsx    From prompts-ai with MIT License 5 votes vote down vote up 
useStyles = makeStyles({
    fullWidth: {
        width: '100%',
    },
})
Example #18
Source File: login.tsx    From knests with MIT License 4 votes vote down vote up 
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),
  },
}))