@material-ui/core/styles#makeStyles JavaScript Examples

The following examples show how to use @material-ui/core/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: AttendanceBar.js    From bunk-manager-mern with MIT License 6 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  expand: {
    transform: "rotate(0deg)",
    marginLeft: "auto",
    transition: theme.transitions.create("transform", {
      duration: theme.transitions.duration.shortest,
    }),
  },
  expandOpen: {
    transform: "rotate(180deg)",
  },
  hiddenBox: {
    padding: "0",
    //marginBottom:"10px"
  },
  hiddenButtonBunk: {
    color: "red",
  },
  hiddenButtonClass: {
    color: "green",
  },
}))
Example #2
Source File: ElementModal.js    From Elemento with MIT License 6 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    position: "absolute",
    width: "1000px",
    backgroundColor: theme.palette.background.paper,
    boxShadow: theme.shadows[8],
    padding: theme.spacing(2, 4, 3),
  },
}))
Example #3
Source File: LeaseSelect.js    From akashlytics-deploy with GNU General Public License v3.0 6 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  formControl: {
    minWidth: "150px",
    width: "auto"
  },
  menuRoot: {
    paddingTop: "17px",
    paddingBottom: "2px"
  },
  selectLabel: {
    top: "2px",
    left: "4px"
  },
  selectItem: {
    lineHeight: "1rem"
  }
}))
Example #4
Source File: Loader.js    From Screencast with MIT License 6 votes vote down vote up 
useStyles = makeStyles((theme) => ({
    loader:{
        width:"100%",
        height:"100vh",
        display:"flex",
        alignItems:"center",
        justifyContent:"center",
        color:"#ff2483",
    }
  }))
Example #5
Source File: dialogStyles.js    From TrelloClone with MIT License 6 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  dialog: {
    padding: 20,
  },
  moveListTop: {
    display: 'flex',
  },
  moveListBottom: {
    display: 'flex',
    flexDirection: 'column',
  },
  moveListButton: {
    marginTop: 20,
  },
}))
Example #6
Source File: Scrolltop.js    From Music-Hoster-FrontEnd-Using-React with MIT License 6 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  toTop: {
    zIndex: 5,
    position: "fixed",
    bottom: "5vh",
    backgroundColor: "#DCDCDC",
    color: "black",
    "&:hover, &.Mui-focusVisible": {
      transition: "0.3s",
      color: "#f24638",
      backgroundColor: "#DCDCDC",
    },
    [theme.breakpoints.up("xs")]: {
      right: "8%",
      backgroundColor: "#f24638",
    },
    [theme.breakpoints.up("sm")]: {
      right: "4%",
    },
    [theme.breakpoints.up("lg")]: {
      right: "2.5%",
    },
  },
}))
Example #7
Source File: navbar.js    From connect-4-online-multiplayer with MIT License 6 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}))
Example #8
Source File: Table.js    From covid-tracker-material-ui-react with MIT License 6 votes vote down vote up 
useToolbarStyles = makeStyles((theme) => ({
  root: {
    paddingLeft: theme.spacing(2),
    paddingRight: theme.spacing(1),
  },
  highlight:
    theme.palette.type === "light"
      ? {
          color: theme.palette.secondary.main,
          backgroundColor: lighten(theme.palette.secondary.light, 0.85),
        }
      : {
          color: theme.palette.text.primary,
          backgroundColor: theme.palette.secondary.dark,
        },
  title: {
    flex: "1 1 100%",
  },
}))
Example #9
Source File: Cards.js    From Covid-19-Statistics with MIT License 6 votes vote down vote up 
useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    color: 'white',
    height: '70px',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: theme.spacing(8),
    backgroundColor: '#01579b',
  },
  icon: {
    marginRight: theme.spacing(2),
  },

  card: {
    maxHeight: '200%',
    display: 'block',
    flexDirection: 'column',
    minWidth: '300px',
    marginLeft: '13.5px',
    marginRight: '13.5px',
    float: 'right',
    width: '100px',
    position: 'center',
    borderRadius: '7px',
    justifyContent: 'space-evenly',
    boxSizing: 'border-box',
    

  },
  cardMedia: {
    paddingTop: '6.25%', // 16:9
    paddingButtom:'6.25%'
  },
  cardContent: {
    flexGrow: 1,
  },

}))
Example #10
Source File: CustomMenuItem.js    From ra-treemenu with MIT License 6 votes vote down vote up 
useStyles = makeStyles(
    theme => ({
        icon: { minWidth: theme.spacing(5) },
        sidebarIsOpen: {
        '& a': {
            paddingLeft: theme.spacing(3),
            transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
            },
        },
    sidebarIsClosed: {
        '& a': {
            paddingLeft: theme.spacing(2),
            transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
            },
        },
        menuItem: {},
        menuItemName: {
            color: theme.palette.secondary
        },
        openMenuItem: {}
    }),
    { name: 'RaTreeCustomMenuItem' }
)
Example #11
Source File: FAQ.js    From Merch-Dropper-fe with MIT License 6 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  root: {
    width: '70%',
    height: "auto",
    margin: 50 
    
  },
  heading: {
    fontSize: theme.typography.pxToRem(18),
    fontWeight: theme.typography.fontWeightRegular,
  },
  panel: {
    borderBottom: "1px solid F3F3F3"
  },
  

}))
Example #12
Source File: EditProfileForms.styles.js    From grants-fe with MIT License 6 votes vote down vote up 
useStyles = makeStyles(theme => ({
  
  editTitle: {
    marginTop: "5%",
    [theme.breakpoints.up("lg")]: {
      fontSize: "1.5rem"
    }
  },

  location: {
   display: "flex",
   flexDirection: "column"
  },

  moreInfo: {
    display: "flex",
    flexDirection: "column"
  },
}))
Example #13
Source File: header.jsx    From neighborhood-chef-fe with MIT License 6 votes vote down vote up 
styles = makeStyles({
  container: {
    display: "flex",
  },
  "header-persistent": {
    minWidth: "100vw",
  },
  "header-variable": {},
})
Example #14
Source File: GetStarted.js    From social-media-strategy-fe with MIT License 6 votes vote down vote up 
useStyles = makeStyles({
  root: {
    width: 500,
    margin: "1%",
    marginTop: "0!important",
    padding: "2.5% 5.5%",
  },
  title: {
    fontSize: 40,
    fontFamily: "Roboto Condensed",
    fontWeight: "Bold",
    lineHeight: "100%",
  },
  button1: {
    background: "#6A4DE0",
    color: "white",
  },
  button2: {
    background: "white",
    color: "#6A4DE0",
  },
  paper: {
    position: "absolute",
    width: 400,
    backgroundColor: "white",
  },
  p: {
    textAlign: "justify",
    letterSpacing: "1px",
    textIndent: "20px",
    fontWeight: "normal",
  },
})
Example #15
Source File: styles.js    From NFT-Marketplace with MIT License 6 votes vote down vote up 
useStyles = makeStyles({
  dropzone: {
    height: "350px",
    background: "#e1E4F2",
    borderRadius: "10px",
  
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    marginTop: "48px",
    outline: "0",
    
    '& img': {
      width: "100%",
      height: "100%",
      objectFit: "cover",
    },
  
    '& p': {
      width: "calc(100% - 60px)",
      height:" calc(100% - 60px)",
      borderRadius: "10px",
      border: "1px dashed #3F51B5",
    
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      color: "#333",

      '& svg': {
        color: "#3F51B5",
        width: "24px",
        height: "24px",
        marginBottom: "8px",
      }
    }
  }
})
Example #16
Source File: App.js    From usfm-grammar-online with MIT License 6 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  container: {
    marginTop: 75,
  },
  panel1: {
    [theme.breakpoints.down("sm")]: {
      marginBottom: 40,
    },
    [theme.breakpoints.down("xs")]: {
      marginTop: 55,
    },
  },
  panel2: {
    [theme.breakpoints.down("sm")]: {
      marginBottom: 40,
    },
  },
}))
Example #17
Source File: QuizScoreDialog.jsx    From Corona-tracker with MIT License 6 votes vote down vote up 
useStyles = makeStyles({
  logo: {
    width: '75px',
    height: '60px',
  },
  textLogo: {
    width: '250px',
    height: '50px',
  },
  text: {
    backgroundImage: 'linear-gradient(40deg, #4760ff 0%, #82a4f8 100%)',
    color: 'white',
  },
  dialogContent: {
    backgroundImage: 'linear-gradient(40deg, #7a9cf9 0%, #97b9f7 100%)',
  },
  descriptionText: {
    textDecoration: 'none',
    color: 'white',
    textAlign: 'center',
    marginTop: '10px',
  },
  buttons: {
    ...buttonsCss.buttons,
    height: '8vh',
    minHeight: '50px',
  },
})
Example #18
Source File: Notifications.js    From app with MIT License 6 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  success: {
    backgroundColor: green[600],
  },
  error: {
    backgroundColor: theme.palette.error.dark,
  },
  info: {
    // backgroundColor: theme.palette.primary.dark
  },
  warning: {
    backgroundColor: amber[700],
  },
  icon: {
    fontSize: 20,
    opacity: 0.9,
    marginRight: theme.spacing(),
  },
  message: {
    display: 'flex',
    alignItems: 'center',
  },
}))
Example #19
Source File: app.jsx    From react-simple-weather-app with Apache License 2.0 6 votes vote down vote up 
useStyles = makeStyles(() => ({
    root: {
        flexGrow: 1,
        display: "flex",
        flexDirection: "column",
        height: "100vh",
        overflow: "hidden",
    },
    containerGrid: {
        flex: 1,
        overflowY: "auto",
        padding: "2em",
    },
    addButton: {
        position: "absolute",
        margin: "1em",
        right: 0,
        bottom: 0,
    },
}))
Example #20
Source File: AccordionCom.js    From Frontend with Apache License 2.0 6 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular,
  },
}))
Example #21
Source File: AccountMenu.js    From e-Pola with MIT License 6 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  button: {
    textTransform: 'none',
    marginLeft: '10px',
    [theme.breakpoints.down(600)]: {
      display: 'none'
    },
    [theme.breakpoints.up(600)]: {
      display: 'inline-flex'
    }
  },
  icon: {
    marginLeft: '5px'
  },
  buttonCollapse: {
    [theme.breakpoints.down(600)]: {
      display: 'inline-flex'
    },
    [theme.breakpoints.up(600)]: {
      display: 'none'
    }
  }
}))
Example #22
Source File: CardGrid.js    From bunk-manager-mern with MIT License 5 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  grids: {
    padding: "2rem 0",
  },
}))
Example #23
Source File: ElementItem.js    From Elemento with MIT License 5 votes vote down vote up 
useStyles = makeStyles({
  root: {
    maxWidth: 300,
  },
})
Example #24
Source File: AudioHint.js    From Screencast with MIT License 5 votes vote down vote up 
useStyles = makeStyles((theme) => {
  return {
    root: {
      backgroundColor: "#ccccff",
      margin: "0px auto",
      [theme.breakpoints.down("sm")]: {
        width: "100%",
        margin: "0px auto",
      },
    },
    loopIcon: {
      color: "#3f51b5",
      "&.selected": {
        color: "#0921a9",
      },
      "&:hover": {
        color: "#7986cb",
      },
    },
    playIcon: {
      color: "#f50057",
      "&:hover": {
        color: "#ff4081",
      },
    },
    replayIcon: {
      color: "#e6e600",
    },
    pauseIcon: {
      color: "#0099ff",
    },
    volumeIcon: {
      color: "rgba(0, 0, 0, 0.54)",
    },
    volumeSlider: {
      color: "black",
    },
    progressTime: {
      color: "rgba(0, 0, 0, 0.54)",
    },
    mainSlider: {
      color: "#3f51b5",
      "& .MuiSlider-rail": {
        color: "#7986cb",
      },
      "& .MuiSlider-track": {
        color: "#3f51b5",
      },
      "& .MuiSlider-thumb": {
        color: "#303f9f",
      },
    },
  };
})