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

The following examples show how to use @material-ui/core/styles#withStyles. 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: Footer.js From bunk-manager-mern with MIT License

6 votes

MyTextField = withStyles({            //textField type 1    
  root: {
    "& label.Mui-focused": {
      color: "white",
    },
    "& .MuiOutlinedInput-root": {
      "& input:valid + fieldset": {
        borderColor: "white",
        borderWidth: 3,
        color: "white",
      },
    },
  },
})(TextField)

Example #2

Source File: Home.js From Elemento with MIT License

6 votes

StyledButton = withStyles({
  root: {
    background: "#FF8E53",
    borderRadius: 6,
    border: 0,
    color: "white",
    height: 48,
    padding: "0 30px",
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    fontSize: "2vh",
   
  },
  label: {
    textTransform: "capitalize",
    
  },
})(Button)

Example #3

Source File: Leadertable.js From Screencast with MIT License

6 votes

StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: "#000044",
    color: "white",
    border: "none",
    fontFamily: "Russo One",
    fontSize: 16
  },
  body: {
    fontFamily: "Russo One",
    fontSize: 13,
    color: "#fff",
    border: "none",
    padding:"10px"
  },
}))(TableCell)

Example #4

Source File: AnnouncementRoom.js From AdaptivApps-fe with MIT License

6 votes

StyledBadge = withStyles((theme) => ({
  badge: {
    left: -10,
    top: 10,
    width: '2%', 
    backgroundColor: '#052942',
    color: 'white',
    fontSize: '1.25rem'
  },
}))(Badge)

Example #5

Source File: Survey.jsx From Corona-tracker with MIT License

6 votes

SurveyConnector = withStyles({
  lineHorizontal: {
    alignContent: 'center',
  },
  alternativeLabel: {
    top: 19,
  },
  active: {
    '& $line': {
      backgroundImage: 'linear-gradient(45deg, #667aff, #4760ff)',
    },
  },
  completed: {
    '& $line': {
      backgroundColor: '#667aff',
    },
  },
  line: {
    height: 3,
    border: 0,
    backgroundColor: '#8EAEFB',
    borderRadius: 1,
  },
})(StepConnector)

Example #6

Source File: Backlogs.js From GB-GCGC with MIT License

6 votes

PrettoSlider = withStyles({
  root: {
    color: "#add8e6",
    height: 8,
  },
  thumb: {
    height: 24,
    width: 24,
    backgroundColor: "#fff",
    border: "2px solid #eeeeee",
    marginTop: -8,
    marginLeft: -12,
    "&:focus, &:hover, &$active": {
      boxShadow: "inherit",
    },
  },
  active: {},
  valueLabel: {
    left: "calc(-50% + 4px)",
  },
  track: {
    height: 8,
    borderRadius: 4,
  },
  rail: {
    height: 8,
    borderRadius: 4,
  },
})(Slider)

Example #7

Source File: Utils.js From Frontend with Apache License 2.0

6 votes

AntSwitch = withStyles((theme) => ({
    root: {
      float:'right'
    },
    switchBase: {
      color: 'blue',
      '&$checked': {
        transform: 'translateX(20px)',
        color: 'white',
        '& + $track': {
          opacity: 1,
          backgroundColor: 'blue',
          borderColor: 'black',
        },
      },
    },
    thumb: {
      boxShadow: 'none',
    },
    track: {
      backgroundColor: 'white',
    },
    checked: {},
  }))(Switch)

Example #8

Source File: BlueSwitch.js From Website with MIT License

6 votes

BlueSwitch = withStyles({
	switchBase: {
		color: "#84b7d7",
		"&$checked": {
			color: "#2d688d",
		},
		"&$checked + $track": {
			backgroundColor: "#2d688d",
		},
	},
	checked: {},
	track: {},
})(Switch)

Example #9

Source File: index.js From Artion-Client with GNU General Public License v3.0

6 votes

PurpleSwitch = withStyles({
  switchBase: {
    color: '#1969FF',
    '&$checked': {
      color: '#1969FF',
    },
    '&$checked + $track': {
      backgroundColor: '#1969FFAA',
    },
  },
  checked: {},
  track: {},
})(Switch)

Example #10

Source File: peer_overview.js From fablet with Apache License 2.0

6 votes

HtmlTooltip = withStyles(theme => ({
    tooltip: {
        backgroundColor: "#f5f5f9",
        color: "rgba(0, 0, 0, 0.87)",
        maxWidth: 650,
        width: 650,
        fontSize: theme.typography.pxToRem(12),
        border: "1px solid #dadde9"
    },
}))(Tooltip)

Example #11

Source File: VisualizerOptionSelectionGrid.js From Otto with MIT License

6 votes

StyledBadge = withStyles((theme) => ({
  badge: {
    width: 10,
    "&::after": {
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      borderRadius: "50%",
      content: '""',
    },
  },
}))(Badge)

Example #12

Source File: Host.js From among-us-proxy with MIT License

6 votes

Accordion = withStyles({
  root: {
    '&:before': {
      display: 'none',
    },
    '&$expanded': {
      margin: 'auto',
    },
  },
  expanded: {},
})(MuiAccordion)

Example #13

Source File: EditHeader.jsx From portfolyo-mern with MIT License

6 votes

PrettoSlider = withStyles({
    root: {
        color: "#52af77",
        height: 8,
        width: "20rem",
    },
    thumb: {
        height: 24,
        width: 24,
        backgroundColor: "#fff",
        border: "2px solid currentColor",
        marginTop: -8,
        marginLeft: -12,
        "&:focus, &:hover, &$active": {
            boxShadow: "inherit",
        },
    },
    active: {},
    valueLabel: {
        left: "calc(-50% + 4px)",
    },
    track: {
        height: 8,
        borderRadius: 4,
    },
    rail: {
        height: 8,
        borderRadius: 4,
    },
})(Slider)

Example #14

Source File: index.jsx From telar-cli with MIT License

6 votes

GreenCheckbox = withStyles({
  root: {
    color: green[400],
    '&$checked': {
      color: green[600],
    },
  },
  checked: {},
})(props => <Checkbox color="default" {...props} />)

Example #15

Source File: ExportDesignMenu.js From EDAViewer with MIT License

6 votes

StyledMenu = withStyles({
	paper: { fontSize: "12px" },
})((props) => (
	<Menu
		elevation={2}
		getContentAnchorEl={null}
		anchorOrigin={{
			vertical: "bottom",
			horizontal: "center",
		}}
		transformOrigin={{
			vertical: "top",
			horizontal: "center",
		}}
		{...props}
	/>
))

Example #16

Source File: Markdown.js From alexa-community-jaipur with MIT License

6 votes

options = {
  overrides: {
    h1: {
      component: Typography,
      props: {
        gutterBottom: true,
        variant: 'h5',
      },
    },
    h2: { component: Typography, props: { gutterBottom: true, variant: 'h6' } },
    h3: { component: Typography, props: { gutterBottom: true, variant: 'subtitle1' } },
    h4: {
      component: Typography,
      props: { gutterBottom: true, variant: 'caption', paragraph: true },
    },
    p: { component: Typography, props: { paragraph: true } },
    a: { component: Link },
    li: {
      component: withStyles(styles)(({ classes, ...props }) => (
        <li className={classes.listItem}>
          <Typography component="span" {...props} />
        </li>
      )),
    },
  },
}

Example #17

Source File: CustomDialogTitle.js From reddish with MIT License

6 votes

DialogTitle = withStyles(styles)((props) => {
  const { children, classes, onClose, ...other } = props;
  return (
    <MuiDialogTitle disableTypography className={classes.root} {...other}>
      <Typography variant="h6" color="primary">
        {children}
      </Typography>
      {onClose ? (
        <IconButton
          aria-label="close"
          className={classes.closeButton}
          onClick={onClose}
        >
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  );
})

Example #18

Source File: CustomDialogTitle.js From stack-underflow with MIT License

6 votes

DialogTitle = withStyles(styles)((props) => {
  const { children, classes, onClose, ...other } = props;
  return (
    <MuiDialogTitle disableTypography className={classes.root} {...other}>
      <Typography variant="h6">{children}</Typography>
      {onClose ? (
        <IconButton
          aria-label="close"
          className={classes.closeButton}
          onClick={onClose}
        >
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  );
})

Example #19

Source File: index.js From contributor-graph with Apache License 2.0

6 votes

DialogTitle = withStyles(styles)((props) => {
  const { children, classes, onClose, ...other } = props;
  return (
    <MuiDialogTitle disableTypography className={classes.root} {...other}>
      <Typography variant="h6">{children}</Typography>
      {onClose ? (
        <IconButton
          aria-label="close"
          className={classes.closeButton}
          onClick={onClose}
        >
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  );
})

Example #20

Source File: MyNFTs.js From loan-shark with MIT License

6 votes

ToggleSwitch = withStyles({
  switchBase: {
    color: '#000080',
    '&$checked': {
      color: '#f5bf05',
    },
    '&$checked + $track': {
      backgroundColor: '#ffffff',
    },
  },
  checked: {},
  track: {},
})(Switch)

Example #21

Source File: CategoryMenu.jsx From covid-trials-dashboard with MIT License

6 votes

StyledMenuItem = withStyles(theme => ({
  root: {
    '&:focus': {
      backgroundColor: theme.palette.primary.main,
      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
        color: theme.palette.common.white,
      },
      '.MuiButton-contained': {
        backgroundColor: theme.secondary,
      },
    },
  },
}))(MenuItem)

Example #22

Source File: Header.js From hk-independent-bus-eta with GNU General Public License v3.0

6 votes

LanguageTabs = withStyles({
  root: {
    borderBottom: 'none',
    minHeight: 24
  },
  indicator: {
    backgroundColor: 'transparent'
  }
})(Tabs)

Example #23

Source File: Contact.js From material-ui-portfolio with MIT License

6 votes

InputField = withStyles({
  root: {
    "& label.Mui-focused": {
      color: "tomato",
    },
    "& label": {
      color: "tan",
    },
    "& .MuiOutlinedInput-root": {
      "& fieldset": {
        borderColor: "tan",
      },
      "&:hover fieldset": {
        borderColor: "tan",
      },
      "&.Mui-focused fieldset": {
        color: "#fff",
        borderColor: "tan",
      },
    },
  },
})(TextField)

Example #24

Source File: BoldLink.jsx From feedadoc with MIT License

6 votes

BoldLink = withStyles({
  root: {
    fontWeight: "bold",
    borderBottom: "2px solid",
    "&:hover": {
      color: "#D50000",
      borderBottom: "4px solid",
    },
  },
})(Link)

Example #25

Source File: DeviceDialog.js From budgie-stream with MIT License

6 votes

CustomDialogTitle = withStyles(styles)((props) => {
  const { children, classes, onRefresh, ...other } = props;
  return (
    <DialogTitle disableTypography className={classes.root} {...other}>
      <Typography className={classes.title} variant="h6">
        {children}
      </Typography>

      <IconButton
        aria-label="refresh"
        className={classes.closeButton}
        onClick={onRefresh}
      >
        <SyncIcon />
      </IconButton>
    </DialogTitle>
  );
})

Example #26

Source File: Schedule.js From Healthcare-Pro with MIT License

6 votes

CustomTableCell = withStyles(theme => ({
    head: {
      backgroundColor: '#DCDCDC',
        color: "black",
        fontSize: 15,
        fontWeight: "bold",
        textAlign: "left",
        paddingLeft:20
    },
    body: {
        fontSize: 20,
        paddingLeft:20,
        textAlign: "left"
    }
}))(TableCell)

Example #27

Source File: ContentDialog.jsx From redive_linebot with MIT License

6 votes

DialogTitle = withStyles(styles)(props => {
  const { children, classes, onClose, ...other } = props;
  return (
    <MuiDialogTitle disableTypography className={classes.root} {...other}>
      <Typography variant="h6">{children}</Typography>
      {onClose ? (
        <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  );
})

Example #28

Source File: index.js From iiitt with MIT License

6 votes

DialogTitle = withStyles(styles)((props) => {
  const { children, classes, onClose, ...other } = props;
  return (
    <MuiDialogTitle disableTypography className={classes.root} {...other}>
      <Typography variant="h6">{children}</Typography>
      {onClose ? (
        <IconButton
          aria-label="close"
          className={classes.closeButton}
          onClick={onClose}
        >
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  );
})

Example #29

Source File: Usage.js From handReacting with Apache License 2.0

6 votes

DialogTitle = withStyles(styles)((props) => {
  const { children, classes, onClose, ...other } = props;
  return (
    <MuiDialogTitle disableTypography className={classes.root} {...other}>
      <Typography variant="h6">{children}</Typography>
      {onClose ? (
        <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  );
})