@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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Example #29

Source File: FancySwitch.js From Website with MIT License

6 votes

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}/>)