@material-ui/styles#makeStyles JavaScript 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: index.js    From acy-dex-interface with MIT License 6 votes vote down vote up 
useStyles = makeStyles({
  root: {},
  track: {},
  switchBase: {
    color: '#FFF',
    '&$checked': {
      color: '#eb5c20',
    },
    '&$checked + $track': {
      backgroundColor: '#a34520',
    },
  },
  checked: {},
  thumb: {},
})
Example #2
Source File: AnnounceMessage.js    From treetracker-admin-client with GNU Affero General Public License v3.0 6 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  drawer: {
    background: 'light tan',
    width: DRAWER_WIDTH,
    padding: theme.spacing(3),
  },
  title: {
    width: '100%',
    display: 'flex',
    flexFlow: 'row',
  },
  formTitle: {
    color: theme.palette.primary.main,
  },
  directions: {
    color: 'grey',
    margin: '5px',
    wordWrap: 'break-word',
  },
  closeAnnounce: {
    marginLeft: 'auto',
    border: '1px solid ' + `${theme.palette.primary.main}`,
  },
  form: {
    width: DRAWER_WIDTH - 20,
    display: 'flex',
    flexDirection: 'column',
    justifycontent: 'center',
    marginBottom: '2em',
  },
  sendButton: {
    background: theme.palette.primary.main,
    color: 'white',
    marginTop: '10px',
  },
}))
Example #3
Source File: examples.js    From Queen with MIT License 6 votes vote down vote up 
useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}))
Example #4
Source File: VideoCreateForm.js    From course-manager with MIT License 6 votes vote down vote up 
useStyles = makeStyles({
  card: {
    maxWidth: 345,
    left: '50%',
    top: '50%',
    transform: 'translate(-50%, -50%)',
    padding: '12px'
  }
})
Example #5
Source File: Sidebar.js    From telar-cli with MIT License 6 votes vote down vote up 
useStyles = makeStyles(theme => ({
  drawer: {
    width: 240,
    [theme.breakpoints.up('lg')]: {
      marginTop: 64,
      height: 'calc(100% - 64px)'
    }
  },
  root: {
    backgroundColor: theme.palette.white,
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
    padding: theme.spacing(2)
  },
  divider: {
    margin: theme.spacing(2, 0)
  },
  nav: {
    marginBottom: theme.spacing(2)
  }
}))
Example #6
Source File: Button.js    From Lambda with MIT License 6 votes vote down vote up 
useStyles = makeStyles({
  root: {
    background: (props) =>
      props.color === "red"
        ? "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
        : "linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)",
    border: 0,
    borderRadius: 3,
    boxShadow: (props) =>
      props.color === "red"
        ? "0 3px 5px 2px rgba(255, 105, 135, .3)"
        : "0 3px 5px 2px rgba(33, 203, 243, .3)",
    color: "white",
    height: (props) => (props.size === "sm" ? 36 : 48),
    padding: "0 30px",
    margin: 8,
  },
})
Example #7
Source File: RouteInputPad.js    From hk-independent-bus-eta with GNU General Public License v3.0 6 votes vote down vote up 
useStyles = makeStyles(theme => ({
  boxContainer: {
    display: 'flex',
    flexDirection: 'row',
    height: 'calc(100vh - 330px - 112px)',
    paddingTop: 'calc(50vh - 165px - 56px - 88px)',
    paddingBottom: 'calc(50vh - 165px - 56px - 88px)',
    justifyContent: 'space-around'
  },
  numPadContainer: {
    width: '60%',
  },
  alphabetPadContainer: {
    width: '20%',
    height: '176px',
    overflowX: 'hidden',
    overflowY: 'scroll'
  },
  button: {
    width: '100%',
    height: '44px',
    fontSize: '1.2em',
    borderRadius: 'unset'
  },
  cancelButton: {
    fontSize: '0.8em',
  },
  alphabetButton: {
    height: '42px'
  }
}))
Example #8
Source File: index.js    From eosio-components with MIT License 6 votes vote down vote up 
useRootStyles = makeStyles({
  root: {
    position: 'fixed',
    display: 'flex',
    flexDirection: 'column',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: (props) => props.color,
    borderRight: (props) => `2px solid ${props.color}`,
    borderLeft: (props) => `2px solid ${props.color}`
  }
})
Example #9
Source File: index.js    From guias.eoscostarica.io with Apache License 2.0 6 votes vote down vote up 
useStyles = makeStyles(() => ({
  resetButton:{
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  root: {
    width: '90%'
  },
  buttonContainer: {
    direction: 'rtl',
    margin: '0% 4%',
  },
  button: {
    textTransform: 'none',
    color: '#7f7f7f',
    '&.MuiButton-containedPrimary': {
      color: '#fff',
      backgroundColor: '#3EBBD3',
      margin: '1%',
    }
  },
  instructions: {
    margin: '1% 5% 1%',
  },
  stepIconRoot: {
    color: 'rgb(192 192 192)',
    '&.MuiStepIcon-active': {
      color: '#3EBBD3'
    },
    '&.MuiStepIcon-completed': {
      color: '#82B982'
    }
  }
}))
Example #10
Source File: index.js    From lifebank with MIT License 6 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  marker: {
    backgroundImage: ({ type }) => {
      switch (type) {
        case SPONSOR:
          return `url(${sponsorSvg})`

        case PENDING_SPONSOR:
          return `url(${pendingSponsorSvg})`

        case LIFE_BANK:
          return `url(${lifeBankSvg})`

        default:
          return `url(${lifeBankSvg})`
      }
    },
    backgroundSize: 'cover',
    width: 30,
    height: 30,
    borderRadius: '50%',
    cursor: 'pointer'
  }
}))
Example #11
Source File: BaseChartCard.js    From git-insights with MIT License 6 votes vote down vote up 
useStyles = makeStyles(() => ({
  root: {},
  chartContainer: {
    height: 400,
    position: 'relative'
  },
  actions: {
    justifyContent: 'flex-end'
  },
  cardActionBtn: {
    top: '4px',
    right: '4px',
  }
}))
Example #12
Source File: index.jsx    From dineforward with MIT License 6 votes vote down vote up 
useStyles = makeStyles({
  root: {
    padding: 0,
  },
  buttonBox: {
    marginBottom: '50px',
    marginTop: '50px',
    paddingLeft: '10px',
    paddingRight: '10px',
  },
  restaurantButton: {
    paddingBottom: '1.2em',
    paddingTop: '1.2em',
  },
})
Example #13
Source File: container-filters.styles.js    From horondi_admin with MIT License 6 votes vote down vote up 
useStyles = makeStyles(() => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
    gap: 13,
    alignItems: 'flex-end',
    margin: '20px 0'
  }
}))
Example #14
Source File: AnalysisCard.js    From jobtriage with MIT License 6 votes vote down vote up 
useStyles = makeStyles(() => ({
  root: {
    width: '100%',
    border: '1px solid #e0e0e0',
    borderRadius: '3px',
    boxShadow: '1px 1px 8px #e0e0e0',
  },
  contentDiv: {
    height: '25vh',
    overflow: 'auto',
  },
  menu: {
    display: 'flex',
    justifyContent: 'flex-end',
  },
}))
Example #15
Source File: AccountProfile.js    From conectadev with MIT License 6 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  root: {},
  card: {
    marginBottom: theme.spacing(2),
  },
  details: {
    display: 'flex',
  },
  avatar: {
    marginLeft: 'auto',
    height: 110,
    width: 100,
    flexShrink: 0,
    flexGrow: 0,
  },
  bio: {
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(2),
  },
  progress: {
    marginTop: theme.spacing(2),
  },
  uploadButton: {
    marginRight: theme.spacing(2),
  },
  userInfo: {
    marginBottom: theme.spacing(2),
  },
}))
Example #16
Source File: OftadehNavBadge.jsx    From oftadeh-react-admin with MIT License 6 votes vote down vote up 
useStyles = makeStyles(theme => ({
  root: {
    padding: "0 7px",
    fontSize: 11,
    fontWeight: 600,
    height: 20,
    minWidth: 20,
    borderRadius: 20,
    display: "flex",
    alignItems: "center"
    // backgroundColor: theme.palette.secondary.main,
    // color: theme.palette.secondary.contrastText
  }
}))
Example #17
Source File: AddMedicine.js    From DMS_React with GNU Affero General Public License v3.0 6 votes vote down vote up 
useStyles = makeStyles((theme= Theme) =>
    createStyles({
        
        wrapper: {
            margin: theme.spacing.unit,
            position: 'relative',
        },
        buttonSuccess: {
            backgroundColor: green[500],
            color: grey[50],
            '&:hover': {
                backgroundColor: green[700],
            },
        },
        buttonProgress: {
            color: green[500],
            position: 'absolute',
            top: '50%',
            left: '50%',
            marginTop: -12,
            marginLeft: -12,
        },
    }))
Example #18
Source File: Dot.js    From react-code-splitting-2021-04-26 with MIT License 6 votes vote down vote up 
useStyles = makeStyles(theme => ({
  dotBase: {
    width: 8,
    height: 8,
    backgroundColor: theme.palette.text.hint,
    borderRadius: "50%",
    transition: theme.transitions.create("background-color"),
  },
  dotSmall: {
    width: 5,
    height: 5
  },
  dotLarge: {
    width: 11,
    height: 11,
  },
}))
Example #19
Source File: style.js    From wiki with GNU General Public License v3.0 6 votes vote down vote up 
useStyles = makeStyles(({ breakpoints }) =>
  createStyles({
    drawer: {
      [breakpoints.up('sm')]: {
        width: drawerWidth,
        flexShrink: 0,
      },
    },
    drawerPaper: {
      width: drawerWidth,
    },
    drawerContainer: {
      overflow: 'auto',
    }
  }),
)
Example #20
Source File: Dashlet.js    From SESTA-FMS with GNU Affero General Public License v3.0 6 votes vote down vote up 
useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: "#f4f6f8"
  },
  "@global": {
    ".MuiFormControl-root": {
      backgroundColor: "#FFFFFF",
      "&:hover": {
        backgroundColor: "#FFFFFF"
      },
      "&:active": {
        backgroundColor: "#FFFFFF"
      }
    },
    ".MuiInputBase-input": {
      backgroundColor: "#FFFFFF!important"
    }
  },
  pad3: {
    padding: theme.spacing(3)
  },
  pad4: {
    padding: theme.spacing(4)
  }
}))
Example #21
Source File: UserEditModalContent.jsx    From neighborhood-chef-fe with MIT License 5 votes vote down vote up 
styles = makeStyles(theme => {

    return ({
        container: {
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            background: "white",
            width: "33vw",
            height: '75vh',
            display: "flex",
            flexDirection: "column",
            alignItems: "center",

            [theme.breakpoints.down('md')]: {
                width: "66vw"
            },

            [theme.breakpoints.down('sm')]: {
                width: "88vw"
            }
        },
        closeButton: {
            alignSelf: "flex-end",
            padding: "2.5%",
            cursor: "pointer",
        },
        formContainer: {
            width: "100%",
            marginTop: "7%",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",

            "& button": {
                margin: "6% auto",
                fontSize: "125%"
            }
        },
        labels: {
            width: "90%",
            marginTop: "3%",

            "& > span": {
                alignSelf: "flex-start",
                marginLeft: "10%"
            },

            "& > div": {
                width: "75%"
            }
        }
    })
})
Example #22
Source File: Inbox.js    From treetracker-admin-client with GNU Affero General Public License v3.0 5 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  paper: {
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'column',
  },
  searchInbox: {
    alignSelf: 'flex-end',
  },
  list: {
    height: '100%',
    width: '100%',
    overflow: 'auto',
    padding: 0,
  },
  listItem: {
    borderBottom: '1px solid lightGrey',
    '&.Mui-selected': {
      background: theme.palette.primary.lightVery,
      borderLeft: `5px solid ${theme.palette.primary.main}`,
      borderBottom: `1px solid ${theme.palette.primary.main}`,
    },
  },
  listText: {
    [theme.breakpoints.down('sm')]: {
      justifyContent: 'center',
    },
  },
  messageText: {
    [theme.breakpoints.down('sm')]: {
      display: 'none',
    },
  },
  avatar: {
    marginTop: '0',
    [theme.breakpoints.down('xs')]: {
      display: 'none',
    },
  },
}))
Example #23
Source File: FileUploader.js    From course-manager with MIT License 5 votes vote down vote up 
useStyles = makeStyles({
  root: {
    width: '100%'
  }
})
Example #24
Source File: Footer.js    From telar-cli with MIT License 5 votes vote down vote up 
useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(4)
  }
}))
Example #25
Source File: Modal.js    From eosio-components with MIT License 5 votes vote down vote up 
useStyles = makeStyles(Styles)
Example #26
Source File: ConsentComponent.js    From lifebank with MIT License 5 votes vote down vote up 
useStyles = makeStyles(styles)