@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: Usage.js    From handReacting with Apache License 2.0 6 votes vote down vote up 
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 #2
Source File: PropsTreeGroup.js    From react-ui-builder-editor with GNU General Public License v3.0 6 votes vote down vote up 
PropsListItemExtraButton = withStyles({
  root: {
    padding: '2px',
    fontSize: '12px',
    border: '1px solid #dddddd',
    backgroundColor: '#f5f5f5',
    marginLeft: '5px'
  }
})(IconButton)
Example #3
Source File: CustomSlider.js    From Artistify.ai with MIT License 6 votes vote down vote up 
CustomSlider = withStyles((theme) => ({
    root: {
      height: 6,
      color: theme.palette.secondary.light,
    },
    thumb: {
      height: 18,
      width: 18,
      marginTop: -6,
      marginLeft: -9,
    },
    active: {},
    valueLabel: {
      left: 'calc(-50% + 4px)',
    },
    track: {
      color: theme.palette.type==='dark' ? '#3f3f3f' : '#cfd8dc',
      height: 6,
      borderRadius: 4,
    },
    rail: {
      color: theme.palette.type==='dark' ? '#3f3f3f' : '#cfd8dc',
      height: 6,
      borderRadius: 4,
    }
  }))(Slider)
Example #4
Source File: MissionData.js    From DMS_React with GNU Affero General Public License v3.0 6 votes vote down vote up 
BootstrapInput = withStyles((theme) => ({
    root: {
        'label + &': {
            marginTop: theme.spacing(3),
        },
    },
    input: {
        borderRadius: 4,
        position: 'relative',
        backgroundColor: '#495057',
        border: '1px solid #686F76',
        fontSize: 16,
        color: 'white',
        padding: '10px 26px 10px 12px',
        transition: theme.transitions.create(['border-color', 'box-shadow']),
        // Use the system font instead of the default Roboto font.
        '&:focus': {
            borderRadius: 4,
            borderColor: 'white',
        },
    },
}))(InputBase)
Example #5
Source File: UrlsDialog.js    From FireShort with MIT License 6 votes vote down vote up 
AntSwitch = withStyles((theme) => ({
    root: {
        width: 28,
        height: 16,
        padding: 0,
        display: 'flex',
    },
    switchBase: {
        padding: 2,
        color: theme.palette.grey[500],
        '&$checked': {
            transform: 'translateX(12px)',
            color: theme.palette.common.white,
            '& + $track': {
                opacity: 1,
                backgroundColor: theme.palette.primary.main,
                borderColor: theme.palette.primary.main,
            },
        },
    },
    thumb: {
        width: 12,
        height: 12,
        boxShadow: 'none',
    },
    track: {
        border: `1px solid ${theme.palette.grey[500]}`,
        borderRadius: 16 / 2,
        opacity: 1,
        backgroundColor: theme.palette.common.white,
    },
    checked: {},
}))(Switch)
Example #6
Source File: ResponsesTable.js    From quizdom with MIT License 6 votes vote down vote up 
StyledTableCell = withStyles((theme) => ({
	head: {
		backgroundColor: '#d81e5b',
		color: theme.palette.common.white,
	},
	body: {
		fontSize: 14,
	},
}))(TableCell)
Example #7
Source File: table.js    From expo-notifications-tool with MIT License 6 votes vote down vote up 
StyledTableCell = withStyles(theme => ({
  head: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white
  },
  body: {
    fontSize: 14
  }
}))(TableCell)
Example #8
Source File: TimeLog.js    From jobtriage with MIT License 6 votes vote down vote up 
BootstrapTooltip = withStyles((theme) => ({
  arrow: {
    color: theme.palette.common.black,
  },
  tooltip: {
    backgroundColor: theme.palette.common.black,
    fontSize: 16,
  },
}))(Tooltip)
Example #9
Source File: Components.jsx    From reactjs-media with MIT License 6 votes vote down vote up 
ProgressBar = withStyles({
  root: {
    color: '#fff',
  },
  thumb: {
    backgroundColor: '#fff',
  },
  active: {},
  rail: {
    backgroundColor: '#fff',
  }
})(Slider)
Example #10
Source File: InstallDialog.js    From bumblebee with MIT License 6 votes vote down vote up 
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 #11
Source File: SearchTextField.js    From hacktoberfest-participants with MIT License 6 votes vote down vote up 
SearchTextField = withStyles((theme) => {
    return {
        root: {
            '& .MuiOutlinedInput-root': {
                '& fieldset': {
                    borderColor: theme.palette.secondary.dark,
                },
                '&:hover fieldset': {
                    borderColor: theme.palette.primary.contrastText,
                },
                '&.Mui-focused fieldset': {
                    borderColor: theme.palette.primary.contrastText,
                },
            },
        },
    }
})(OutlinedInput)
Example #12
Source File: LeaderBoard.js    From contest.hnccbits.com with GNU General Public License v3.0 6 votes vote down vote up 
StyledTableCell = withStyles((theme) => ({
	head: {
		backgroundColor: theme.palette.common.black,
		color: theme.palette.common.white,
	},
	body: {
		fontSize: 14,
	},
}))(TableCell)
Example #13
Source File: index.js    From iiitt with MIT License 6 votes vote down vote up 
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 #14
Source File: ContentDialog.jsx    From redive_linebot with MIT License 6 votes vote down vote up 
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 #15
Source File: Schedule.js    From Healthcare-Pro with MIT License 6 votes vote down vote up 
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 #16
Source File: DeviceDialog.js    From budgie-stream with MIT License 6 votes vote down vote up 
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 #17
Source File: BoldLink.jsx    From feedadoc with MIT License 6 votes vote down vote up 
BoldLink = withStyles({
  root: {
    fontWeight: "bold",
    borderBottom: "2px solid",
    "&:hover": {
      color: "#D50000",
      borderBottom: "4px solid",
    },
  },
})(Link)
Example #18
Source File: Contact.js    From material-ui-portfolio with MIT License 6 votes vote down vote up 
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 #19
Source File: StopAccordions.js    From hk-independent-bus-eta with GNU General Public License v3.0 6 votes vote down vote up 
AccordionSummary = withStyles({
  root: {
    backgroundColor: 'rgba(0, 0, 0, .03)',
    borderBottom: '1px solid rgba(0, 0, 0, .125)',
    marginBottom: -1,
    minHeight: 44,
    '&$expanded': {
      minHeight: 44,
    }
  },
  content: {
    '&$expanded': {
      margin: '8px 0',
    },
    margin: '8px 0',
    flexDirection: 'column'
  },
  expanded: {},
})(MuiAccordionSummary)
Example #20
Source File: CategoryMenu.jsx    From covid-trials-dashboard with MIT License 6 votes vote down vote up 
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 #21
Source File: MyNFTs.js    From loan-shark with MIT License 6 votes vote down vote up 
ToggleSwitch = withStyles({
  switchBase: {
    color: '#000080',
    '&$checked': {
      color: '#f5bf05',
    },
    '&$checked + $track': {
      backgroundColor: '#ffffff',
    },
  },
  checked: {},
  track: {},
})(Switch)
Example #22
Source File: index.js    From contributor-graph with Apache License 2.0 6 votes vote down vote up 
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 #23
Source File: Footer.js    From bunk-manager-mern with MIT License 6 votes vote down vote up 
MyTextField = withStyles({            //textField type 1    
  root: {
    "& label.Mui-focused": {
      color: "white",
    },
    "& .MuiOutlinedInput-root": {
      "& input:valid + fieldset": {
        borderColor: "white",
        borderWidth: 3,
        color: "white",
      },
    },
  },
})(TextField)
Example #24
Source File: index.js    From Artion-Client with GNU General Public License v3.0 6 votes vote down vote up 
PurpleSwitch = withStyles({
  switchBase: {
    color: '#1969FF',
    '&$checked': {
      color: '#1969FF',
    },
    '&$checked + $track': {
      backgroundColor: '#1969FFAA',
    },
  },
  checked: {},
  track: {},
})(Switch)
Example #25
Source File: PrettoSlider.js    From Website with MIT License 6 votes vote down vote up 
PrettoSlider = withStyles({
	root: {
		color: "#2d688d",
		height: 8,
	},
	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 #26
Source File: peer_overview.js    From fablet with Apache License 2.0 6 votes vote down vote up 
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 #27
Source File: VisualizerOptionSelectionGrid.js    From Otto with MIT License 6 votes vote down vote up 
StyledBadge = withStyles((theme) => ({
  badge: {
    width: 10,
    "&::after": {
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      borderRadius: "50%",
      content: '""',
    },
  },
}))(Badge)
Example #28
Source File: Host.js    From among-us-proxy with MIT License 6 votes vote down vote up 
Accordion = withStyles({
  root: {
    '&:before': {
      display: 'none',
    },
    '&$expanded': {
      margin: 'auto',
    },
  },
  expanded: {},
})(MuiAccordion)
Example #29
Source File: FancySwitch.js    From Website with MIT License 6 votes vote down vote up 
FancySwitch = withStyles({
	root: {
		padding: 7,
	},
	thumb: {
		width: 24,
		height: 24,
		backgroundColor: "#fff",
		boxShadow: "0 0 12px 0 rgba(0,0,0,0.08), 0 0 8px 0 rgba(0,0,0,0.12), 0 0 4px 0 rgba(0,0,0,0.38)",
	},
	switchBase: {
		color: "rgba(0,0,0,0.38)",
		padding: 7,
	},
	track: {
		borderRadius: 20,
		backgroundColor: blueGrey[300],
	},
	checked: {
		"& $thumb": {
			backgroundColor: "#fff",
		},
		"& + $track": {
			opacity: "1 !important",
		},
	},
})(props => <Switch color="primary" {...props}/>)