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

The following examples show how to use @material-ui/core/styles#styled. 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: SecondaryInput.js    From Codelabz with Apache License 2.0 6 votes vote down vote up 
Input = styled(InputBase)(({ theme }) => ({
  "label + &": {
    marginTop: theme.spacing(3),
  },
  "& .MuiInputBase-input": {
    borderRadius: 4,
    position: "relative",
    backgroundColor: theme.palette.mode === "light" ? "#fcfcfb" : "#F9F9F9",
    border: "1px solid #ced4da",
    borderRadius: 6,
    fontSize: 16,
    width: "100%",
    padding: "10px 12px",
    transition: theme.transitions.create([
      "border-color",
      "background-color",
      "box-shadow",
    ]),
    fontFamily: ["Roboto", "Helvetica", "Arial", "sans-serif"].join(","),
    "&:focus": {
      boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
      borderColor: theme.palette.primary.main,
    },
  },
}))
Example #2
Source File: Room.js    From symbl-twilio-video-react with Apache License 2.0 6 votes vote down vote up 
Container = styled('div')(({ theme }) => ({
  position: 'relative',
  height: '100%',
  gridTemplateColumns: `${theme.sidebarWidth}px 1fr`,
  gridTemplateAreas: '". participantList transcript"',
  gridTemplateRows: '100%',
  [theme.breakpoints.down('xs')]: {
    gridTemplateAreas: '"participantList" "."',
    gridTemplateColumns: `auto`,
    gridTemplateRows: `calc(100% - ${theme.sidebarMobileHeight + 12}px) ${theme.sidebarMobileHeight + 6}px`,
    gridGap: '6px',
  },
}))
Example #3
Source File: PrimaryInput.js    From Codelabz with Apache License 2.0 6 votes vote down vote up 
Input = styled(InputBase)(({ theme }) => ({
  "label + &": {
    marginTop: theme.spacing(3),
  },
  "& .MuiInputBase-input": {
    borderRadius: 4,
    position: "relative",
    backgroundColor: theme.palette.mode === "light" ? "#fcfcfb" : "#fff",
    border: "1px solid #ced4da",
    borderRadius: 6,
    fontSize: 16,
    width: "100%",
    padding: "10px 12px",
    transition: theme.transitions.create([
      "border-color",
      "background-color",
      "box-shadow",
    ]),
    fontFamily: ["Roboto", "Helvetica", "Arial", "sans-serif"].join(","),
    "&:focus": {
      boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
      borderColor: theme.palette.primary.main,
    },
  },
}))
Example #4
Source File: ParticipantStrip.js    From symbl-twilio-video-react with Apache License 2.0 6 votes vote down vote up 
Container = styled('aside')(({ theme }) => ({
  padding: '0.5em',
  overflowY: 'auto',
  position: "absolute",
  backgroundColor: "#333",
  zIndex: 500,
  [theme.breakpoints.down('xs')]: {
    overflowY: 'initial',
    overflowX: 'auto',
    padding: 0,
    display: 'flex',
  },
}))
Example #5
Source File: NetworkQualityLevel.js    From symbl-twilio-video-react with Apache License 2.0 6 votes vote down vote up 
Container = styled('div')({
  display: 'flex',
  alignItems: 'flex-end',
  '& div': {
    width: '2px',
    border: '1px solid black',
    boxSizing: 'content-box',
    '&:not(:last-child)': {
      borderRight: 'none',
    },
  },
})
Example #6
Source File: ProfileMenu.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
DropdownIcon = styled(IconButton)({
    padding: 0,
    borderRadius: 0,
    paddingLeft: '5px',
    '&:hover, &:focus': {
        backgroundColor: 'transparent',
        borderColor: '#c8c8c8 !important',
    },
})
Example #7
Source File: ProfileMenu.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
MenuItem = styled(MuiMenuItem)({
    fontSize: '14px',
    display: 'flex',
    alignItems: 'center',
    cursor: 'pointer',
    '& > .menuItemIcon': {
        marginRight: '15px',
        width: '21px',
        height: '21px',
        cursor: 'pointer',

        '& > svg': {
            width: '21px',
            height: '21px',
        },
    },
    '& > .menuItemLabel': {
        cursor: 'pointer',
    },
})
Example #8
Source File: ProfileMenu.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
DropdownIcon = styled(IconButton)({
    padding: 0,
    borderRadius: 0,
    paddingLeft: '5px',
    '&:hover, &:focus': {
        backgroundColor: 'transparent',
        borderColor: '#c8c8c8 !important',
    },
})
Example #9
Source File: ProfileMenu.js    From ehr with GNU Affero General Public License v3.0 6 votes vote down vote up 
MenuItem = styled(MuiMenuItem)({
    fontSize: '14px',
    display: 'flex',
    alignItems: 'center',
    cursor: 'pointer',
    '& > .menuItemIcon': {
        marginRight: '15px',
        width: '21px',
        height: '21px',
        cursor: 'pointer',

        '& > svg': {
            width: '21px',
            height: '21px',
        },
    },
    '& > .menuItemLabel': {
        cursor: 'pointer',
    },
})
Example #10
Source File: Box.js    From covid with GNU General Public License v3.0 6 votes vote down vote up 
Box = styled(BoxMaterial)(({ theme, color }) => ({
  width: theme.spacing(2),
  height: theme.spacing(2),
  marginRight: theme.spacing(1),
  ...theme.shape,
  borderWidth: 1,
  borderStyle: 'solid',
  borderColor: theme.palette.text.hint,
  backgroundColor: color
}))
Example #11
Source File: MapImage.jsx    From covid with GNU General Public License v3.0 6 votes vote down vote up 
ReactTooltipStyled = styled(ReactTooltip)(({ theme }) => ({
  backgroundColor: `${theme.palette.background.default} !important`,
  color: `${theme.palette.text.primary} !important`,
  opacity: "1 !important",
  borderColor: `${theme.palette.text.hint} !important`,
  ...theme.shape,
  fontFamily: theme.typography.fontFamily,
  fontSize: theme.typography.fontSize,
  "&:before": {
    borderTopColor: `${theme.palette.text.hint} !important`,
  },
  "&:after": {
    borderTopColor: `${theme.palette.background.default} !important`,
  },
}))
Example #12
Source File: index.js    From Codelabz with Apache License 2.0 6 votes vote down vote up 
Input = styled(InputBase)(({ theme }) => ({
    'label + &': {
      marginTop: theme.spacing(3),
    },
    '& .MuiInputBase-input': {
      borderRadius: 4,
      position: 'relative',
      backgroundColor: theme.palette.mode === 'light' ? '#fcfcfb' : '#fff',
      border: '1px solid #ced4da',
      fontSize: 16,
      width: 'auto',
      padding: '10px 12px',
      transition: theme.transitions.create([
        'border-color',
        'background-color',
        'box-shadow',
      ]),
      // Use the system font instead of the default Roboto font.
      fontFamily: [
        'Roboto',
        "Helvetica", "Arial", 'sans-serif'
      ].join(','),
      '&:focus': {
        boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
        borderColor: theme.palette.primary.main,
      },
    },
  }))
Example #13
Source File: App.js    From symbl-twilio-video-react with Apache License 2.0 5 votes vote down vote up 
Main = styled('main')({
    overflow: 'hidden',
})
Example #14
Source File: header.js    From turqV2 with GNU General Public License v3.0 5 votes vote down vote up 
AppHeader = styled(AppBar)({
  backgroundColor: '#f8f9fa',
  color: '#444444',
})
Example #15
Source File: ParticipantStrip.js    From symbl-twilio-video-react with Apache License 2.0 5 votes vote down vote up 
ScrollContainer = styled('div')(({ theme }) => ({
  [theme.breakpoints.down('xs')]: {
    display: 'flex',
  },
}))
Example #16
Source File: VideoTrack.js    From symbl-twilio-video-react with Apache License 2.0 5 votes vote down vote up 
Video = styled('video')({
  height: '100%',
  width: '100%',
})
Example #17
Source File: Observations.jsx    From Corona-tracker with MIT License 5 votes vote down vote up 
RedFont = styled(Typography)({
  fontSize: '.9rem',
  textAlign: 'left',
  '& span': {
    color: '#f64141',
    fontWeight: 'bold',
  },
})
Example #18
Source File: App.js    From symbl-twilio-video-react with Apache License 2.0 5 votes vote down vote up 
Container = styled('div')({
    display: 'grid',
    gridTemplateRows: 'auto 1fr',
})
Example #19
Source File: ProfileHeader.js    From ehr with GNU Affero General Public License v3.0 5 votes vote down vote up 
StyledTabs = styled(withTheme(Tabs))(props => ({
    backgroundColor: props.theme.palette.whiteSmoke.main,
    padding: '0 15px',
    height: '40px !important',
    '& .MuiTabs-flexContainer': {
        alignItems: 'flex-end',
    },
}))
Example #20
Source File: HeaderTab.js    From ehr with GNU Affero General Public License v3.0 5 votes vote down vote up 
StyledTab = styled(withTheme(Tab))(props => ({
    color: props.theme.palette.gray80.main,
    minWidth: 'auto',
}))
Example #21
Source File: HeaderTab.js    From ehr with GNU Affero General Public License v3.0 5 votes vote down vote up 
StyledTab = styled(withTheme(Tab))(props => ({
    color: props.theme.palette.gray80.main,
    minWidth: 'auto',
}))
Example #22
Source File: VideoRepresentationsInfo.js    From Earshot with GNU General Public License v2.0 5 votes vote down vote up 
VideoRepresentationInfoCell = styled(TableCell)({
  color: "black",
  padding: "5px 30px 10px 0px",
})
Example #23
Source File: DashStreamInfo.js    From Earshot with GNU General Public License v2.0 5 votes vote down vote up 
StreamInfoCell = styled(TableCell)({
  background: "#D3D3D3",
  borderColor: "#8A8A8A",
  color: "black",
  padding: "5px",
})
Example #24
Source File: Observations.jsx    From Corona-tracker with MIT License 5 votes vote down vote up 
WhiteFont = styled(Typography)({
  textAlign: 'left',
  fontSize: '.9rem',
  '& span': {
    color: 'White',
    fontWeight: 'bold',
  },
})