@material-ui/core#withStyles JavaScript Examples

The following examples show how to use @material-ui/core#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: CoinDialog.js    From Alternative-Uniswap-Interface with GNU General Public License v3.0 6 votes vote down vote up 
DialogTitle = withStyles(styles)((props) => {
  const { children, classes, onClose, ...other } = props;
  return (
    <MuiDialogTitle
      disableTypography
      className={classes.titleSection}
      {...other}
    >
      <Grid
        container
        direction="row"
        justifyContent="space-between"
        alignContent="center"
      >
        <Typography variant="h6" className={classes.titleText}>
          {children}
        </Typography>
        {onClose ? (
          <IconButton aria-label="close" onClick={onClose}>
            <CloseIcon />
          </IconButton>
        ) : null}
      </Grid>
    </MuiDialogTitle>
  );
})
Example #2
Source File: InputSelect.jsx    From zubhub with GNU Affero General Public License v3.0 6 votes vote down vote up 
BootstrapInput = withStyles(theme => ({
  input: {
    borderRadius: 0,
    borderTopLeftRadius: 250,
    borderBottomLeftRadius: 250,
    position: 'relative',
    fontSize: 16,
    padding: '10px 26px 10px 18px',
    backgroundColor: '#00B8C4',
    color: 'white',
    transition: 'background-color 250ms ease',
    textAlign: 'center',
    minHeight: '20px',
    '& ~ svg': {
      color: 'white',
    },
    '&:focus': {
      borderTopLeftRadius: 250,
      borderBottomLeftRadius: 250,
      backgroundColor: '#00B8C4',
    },
    '&[aria-expanded]': {
      borderRadius: 0,
      borderTopLeftRadius: 250,
      borderBottomLeftRadius: 250,
      backgroundColor: 'white',
      color: '#00B8C4',
      '& ~ svg': {
        color: '#00B8C4',
      },
    },
  },
}))(InputBase)
Example #3
Source File: AntTabs.js    From youtube-clone with MIT License 6 votes vote down vote up 
AntTab = withStyles((theme) => ({
  root: {
    color: grey[600],
    textTransform: "uppercase",
    minWidth: 72,
    fontWeight: theme.typography.fontWeightRegular,
    marginRight: theme.spacing(4),
    fontFamily: [
      "-apple-system",
      "BlinkMacSystemFont",
      '"Segoe UI"',
      "Roboto",
      '"Helvetica Neue"',
      "Arial",
      "sans-serif",
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(","),
    "&:hover": {
      color: "black",
      opacity: 1,
    },
    "&$selected": {
      color: "black",
      fontWeight: theme.typography.fontWeightMedium,
    },
    "&:focus": {
      color: "black",
    },
  },
  selected: {},
}))((props) => <Tab disableRipple {...props} />)
Example #4
Source File: OftadehAvatarBadge.jsx    From oftadeh-react-admin with MIT License 6 votes vote down vote up 
StyledBadge = withStyles(theme => ({
  badge: {
    backgroundColor: "#44b700",
    color: "#44b700",
    boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
    "&::after": {
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      borderRadius: "50%",
      animation: "$ripple 1.2s infinite ease-in-out",
      border: "1px solid currentColor",
      content: '""'
    }
  },
  "@keyframes ripple": {
    "0%": {
      transform: "scale(.8)",
      opacity: 1
    },
    "100%": {
      transform: "scale(2.4)",
      opacity: 0
    }
  }
}))(Badge)
Example #5
Source File: MissionForm.js    From resilience-app with GNU General Public License v3.0 6 votes vote down vote up 
StyledHeader = withStyles({
  root: {
    marginTop: "0.8vh",
    padding: "1.2vh 0",
    marginLeft: (props) => (props.main ? 0 : "10%"),
    textTransform: (props) => props.main && "none",
  },
})(({ children, classes, ...rest }) => {
  const { main, ...allowedMuiProps } = rest; // filter `main` from other props. This prevents Typography to throw an error
  return (
    <TypographyWrapper className={classes.root} {...allowedMuiProps}>
      {children}
    </TypographyWrapper>
  );
})
Example #6
Source File: GraphTooltip.js    From inventory-management-web with MIT License 6 votes vote down vote up 
CustomTooltip = withStyles(theme => ({
  tooltip: {
    backgroundColor: '#fff',
    color: 'rgba(0, 0, 0, 0.87)',
    width: 100,
    borderRadius: '0.5rem',
    boxShadow: '4px 4px 20px rgba(0,0,0,0.2)',
    fontSize: '1rem',
    fontWeight: 'bold',
    border: '1px solid #dadde9',
    padding: '0.5rem',
    textAlign: 'center',
    '& h4': {
      fontSize: theme.typography.pxToRem(12),
      fontWeight: 'normal',
      marginBottom: '2px',
    },
    '& *': {
      margin: '5px',
    },
  },
}))(Tooltip)
Example #7
Source File: VitalsEditModal.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
DialogContent = withStyles({
    root: {
        height: '100%',
        margin: '0 20px 20px 20px',
        backgroundColor: '#FFFFFF',
        border: '1px solid #EAEAEA',
        borderRadius: '5px',
        paddingBottom: '25px',
    },
})(MuiDialogContent)
Example #8
Source File: PhysicalDataEditModal.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
DialogContent = withStyles({
    root: {
        height: '100%',
        margin: '0 20px 20px 20px',
        backgroundColor: '#FFFFFF',
        border: '1px solid #EAEAEA',
        borderRadius: '5px',
        paddingBottom: '25px',
    },
})(MuiDialogContent)
Example #9
Source File: PhysicalDataEditModal.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
GridColumn = withStyles({
    root: {
        '&.left-column': {
            margin: '10px 10px 10px 0',
            width: '180px',
        },
        '&.right-column': {
            margin: '10 0px 10px 10px',
            width: '180px',
        },
        '& > .MuiFormControl-root': {
            width: '100%',
        },
    },
})(Grid)
Example #10
Source File: GridColumn.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
GridColumn = withStyles({
    root: {
        '&.left-column': {
            margin: '10px 10px 10px 0',
            width: '180px',
        },
        '&.right-column': {
            margin: '10 0px 10px 10px',
            width: '180px',
        },
        '& > .MuiFormControl-root': {
            width: '100%',
        },
    },
})(Grid)
Example #11
Source File: LabsEditModal.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
DialogContent = withStyles({
    root: {
        height: '100%',
        margin: '0 20px 20px 20px',
        backgroundColor: '#FFFFFF',
        border: '1px solid #EAEAEA',
        borderRadius: '5px',
        paddingBottom: '25px',
    },
})(MuiDialogContent)
Example #12
Source File: DiabetesEditModal.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
DialogContent = withStyles({
    root: {
        height: '100%',
        margin: '0 20px 20px 20px',
        backgroundColor: '#FFFFFF',
        border: '1px solid #EAEAEA',
        borderRadius: '5px',
        paddingBottom: '25px',
    },
})(MuiDialogContent)
Example #13
Source File: DiabetesEditModal.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
GridColumn = withStyles({
    root: {
        '&.left-column': {
            margin: '10px 10px 10px 0',
            width: '180px',
        },
        '&.right-column': {
            margin: '10 0px 10px 10px',
            width: '180px',
        },
        '& > .MuiFormControl-root': {
            width: '100%',
        },
    },
})(Grid)
Example #14
Source File: ActivitiesEditModal.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
GridColumn = withStyles({
    root: {
        '&.left-column': {
            margin: '10px 10px 10px 0',
            width: '180px',
        },
        '&.right-column': {
            margin: '10 0px 10px 10px',
            width: '180px',
        },
        '& > .MuiFormControl-root': {
            width: '100%',
        },
    },
})(Grid)
Example #15
Source File: ActivitiesEditModal.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
DialogContent = withStyles({
    root: {
        height: '100%',
        margin: '0 20px 20px 20px',
        backgroundColor: '#FFFFFF',
        border: '1px solid #EAEAEA',
        borderRadius: '5px',
        paddingBottom: '25px',
    },
})(MuiDialogContent)
Example #16
Source File: KailonaTextField.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
TextField = withStyles(theme => ({
    root: {
        backgroundColor: 'transparent !important',
        flex: 1,
        '& input': {
            backgroundColor: 'transparent !important',
            border: 'none !important',
            padding: '7px 6px 0 6px !important',
            height: '34px',
            '&:before': {
                marginTop: '0',
            },
        },
        '& label': {
            color: `${theme.palette.primary.main} !important`,
            bottom: '24px !important',
            display: 'flex',
            alignItems: 'flex-end',
            padding: '7px 6px',
        },
        '& label + .MuiInput-formControl': {
            marginTop: '0 !important',
        },
        '& .MuiInput-underline:before': {
            borderColor: `${theme.palette.primary.main} !important`,
        },
    },
}))(MuiTextField)
Example #17
Source File: DashboardWidget.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
Typography = withStyles(theme => ({
    root: {
        width: '100%',
        wordBreak: 'break-word',
        textAlign: 'center',
        padding: '10px 5px 5px !important',
        cursor: 'pointer !important',
    },
}))(props => <MuiCardContent {...props} />)
Example #18
Source File: ImportDataBrowser.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
Select = withStyles({
    root: {
        backgroundColor: '#fff',
        padding: '5px 8px',
        '&:hover, &:focus': {
            backgroundColor: '#fff !important',
        },
    },
})(props => <MuiSelect {...props} />)
Example #19
Source File: ProfileEditModal.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
DialogContent = withStyles({
    root: {
        height: '100%',
        margin: '0 20px 20px 20px',
        backgroundColor: '#FFFFFF',
        border: '1px solid #EAEAEA',
        borderRadius: '5px',
        paddingBottom: '25px',
    },
})(MuiDialogContent)
Example #20
Source File: RequestDataModal.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
DialogContent = withStyles({
    root: {
        height: '100%',
        margin: '0 20px 20px 20px',
        backgroundColor: '#FFFFFF',
        border: '1px solid #EAEAEA',
        borderRadius: '5px',
        paddingBottom: '25px',
    },
})(MuiDialogContent)
Example #21
Source File: TextInput.js    From Quizzie with MIT License 6 votes vote down vote up 
TextInput = withStyles({
	root: {
		'& label': {
			color: 'rgba(0,0,0,0.7)',
		},
		'& label.Mui-focused': {
			color: '#2980B9',
		},
		'& .MuiInput-underline:after': {
			borderBottomColor: '#2980B9',
		},
		'& .MuiInputBase-input': {
			color: 'black !important',
		},
		'& .MuiOutlinedInput-root': {
			'& fieldset': {
			  borderColor: 'rgba(0,0,0,0.7)',
			},
			'&:hover fieldset': {
			  borderColor: '#2980B9',
			},
			'&.Mui-focused fieldset': {
			  borderColor: '#2980B9',
			},
		  },
	}
})(TextField)
Example #22
Source File: TimeRangeFilter.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
Link = withStyles(theme => ({
    root: {
        color: theme.palette.gray40.main,
        '&:hover': {
            textDecoration: 'none',
            color: theme.palette.primary.main,
        },
        '&.active': {
            color: theme.palette.primary.main,
        },
    },
}))(MuiLink)
Example #23
Source File: Timeline.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
Link = withStyles(theme => ({
    root: {
        margin: '0 10px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        opacity: 0.7,
        '&.active': {
            opacity: 1,
        },
        '&:hover': {
            textDecoration: 'none',
        },
        '& > .plugin-name': {
            fontSize: '12px',
        },
        '& > .plugin-name, & > .plugin-icon': {
            color: theme.palette.gray40.main,
        },
        '&.disabled': {
            pointerEvents: 'none',
            color: theme.palette.gray30.main,

            '& .plugin-name': {
                color: theme.palette.gray30.main,
            },
        },
    },
}))(MuiLink)
Example #24
Source File: DashboardWidget.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
CardContent = withStyles(theme => ({
    root: {
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: theme.palette.primary.main,
        backgroundColor: theme.palette.whiteSmoke.main,
        cursor: 'pointer !important',
    },
}))(props => <MuiCardContent {...props} />)
Example #25
Source File: Stepper.js    From akashlytics-deploy with GNU General Public License v3.0 6 votes vote down vote up 
QontoConnector = withStyles((theme) => ({
  alternativeLabel: {
    top: 10,
    left: "calc(-50% + 16px)",
    right: "calc(50% + 16px)"
  },
  active: {
    "& $line": {
      borderColor: theme.palette.primary.main
    }
  },
  completed: {
    "& $line": {
      borderColor: theme.palette.primary.main
    }
  },
  line: {
    borderColor: "#eaeaf0",
    borderTopWidth: 3,
    borderRadius: 1
  }
}))(StepConnector)
Example #26
Source File: SurveyPage1.jsx    From Corona-tracker with MIT License 5 votes vote down vote up 
WellnessSlider = withStyles({
  markLabel: {
    fontSize: '1.17rem',
  },
})(Slider)
Example #27
Source File: Form.jsx    From redive_linebot with MIT License 5 votes vote down vote up 
Button = withStyles(theme => ({
  root: {
    marginRight: theme.spacing(1),
  },
}))(MuiButton)
Example #28
Source File: SurveyPage4.jsx    From Corona-tracker with MIT License 5 votes vote down vote up 
WellnessSlider = withStyles({
  markLabel: {
    fontSize: '1.17rem',
  },
})(Slider)
Example #29
Source File: Wrappers.js    From react-code-splitting-2021-04-26 with MIT License 5 votes vote down vote up 
function createStyled(styles, options) {
  var Styled = function(props) {
    const { children, ...other } = props;
    return children(other);
  };

  return withStyles(styles, options)(Styled);
}