@mui/material/styles#styled TypeScript Examples

The following examples show how to use @mui/material/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: notify.tsx    From wallet-adapter with Apache License 2.0 9 votes vote down vote up 
StyledLink = styled(Link)(() => ({
    color: '#ffffff',
    display: 'flex',
    alignItems: 'center',
    marginLeft: 16,
    textDecoration: 'underline',
    '&:hover': {
        color: '#000000',
    },
}))
Example #2
Source File: CampaignFilter.tsx    From frontend with MIT License 6 votes vote down vote up 
Root = styled('div')(() => ({
  [`& .${classes.filterButtons}`]: {
    display: 'block',
    height: '100px',
    borderRadius: 0,
    borderBottom: '5px solid transparent',
    '&:active': {
      color: '#4AC3FF',
      borderBottom: '5px solid #4AC3FF',
    },
    '&:hover': {
      backgroundColor: 'white',
      borderBottom: '5px solid #4AC3FF',
      color: '#4AC3FF',
    },
    '&:focus': {
      color: '#4AC3FF',
      borderBottom: '5px solid #4AC3FF',
    },
    '&:selected': {
      color: '#4AC3FF',
      borderBottom: '5px solid #4AC3FF',
    },
  },
}))
Example #3
Source File: index.tsx    From yearn-watch-legacy with GNU Affero General Public License v3.0 6 votes vote down vote up 
HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
    <Tooltip {...props} classes={{ popper: className }} />
))(({ theme }) => ({
    [`& .${tooltipClasses.tooltip}`]: {
        backgroundColor: '#f5f5f9',
        color: 'rgba(0, 0, 0, 0.87)',
        maxWidth: 750,
        fontSize: theme.typography.pxToRem(12),
        border: '1px solid #dadde9',
    },
}))
Example #4
Source File: BorderLinearProgress.tsx    From Search-Next with GNU General Public License v3.0 6 votes vote down vote up 
BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
  height: 12,
  borderRadius: 6,
  [`&.${linearProgressClasses.colorPrimary}`]: {
    backgroundColor:
      theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800],
  },
  [`& .${linearProgressClasses.bar}`]: {
    borderRadius: 6,
  },
}))
Example #5
Source File: SearchBarComponent.tsx    From professor-prebid with Apache License 2.0 6 votes vote down vote up 
StyledPopper = styled(Popper)({
  [`& .${autocompleteClasses.listbox}`]: {
    boxSizing: 'border-box',
    '& ul': {
      padding: 0,
      margin: 0,
    },
  },
})
Example #6
Source File: StepperIcon.tsx    From frontend with MIT License 6 votes vote down vote up 
Root = styled('div')({
  [`&.${classes.root}`]: {
    alignItems: 'center',
    backgroundColor: '#ccc',
    borderRadius: '50%',
    color: '#fff',
    display: 'flex',
    height: 50,
    justifyContent: 'center',
    width: 50,
    zIndex: 1,
  },

  [`&.${classes.active}`]: {
    backgroundImage: 'linear-gradient(136deg, #4AC3FF 0%, #29a2df 50%, #1b88be 100%)',
    boxShadow: '0 4px 10px 0 rgba(0, 0, 0, 0.25)',
  },

  [`&.${classes.completed}`]: {
    backgroundImage: 'linear-gradient(136deg, #4AC3FF 0%, #29a2df 50%, #1b88be 100%)',
  },
})
Example #7
Source File: thanks.tsx    From usehooks-ts with MIT License 6 votes vote down vote up 
Snackbar = styled(MuiSnackbar)(({ theme }) => ({
  flexDirection: 'column',

  '&::before': {
    content: '""',
    display: 'block',
    ...theme.mixins.toolbar,
  },

  [`& .${classes.content}`]: {
    backgroundColor: theme.palette.background.paper,
    backgroundImage: 'none',
    color: theme.palette.text.primary,
  },
}))
Example #8
Source File: ProgressBarWrapper.tsx    From console with GNU Affero General Public License v3.0 6 votes vote down vote up 
BorderLinearProgress = styled(LinearProgress)(() => ({
  height: 10,
  borderRadius: 5,
  [`&.${linearProgressClasses.colorPrimary}`]: {
    backgroundColor: "#f1f1f1",
  },
  [`& .${linearProgressClasses.bar}`]: {
    borderRadius: 5,
  },
}))
Example #9
Source File: mdxRenderer.tsx    From usehooks-ts with MIT License 6 votes vote down vote up 
Quote = styled(Typography)(({ theme }) => ({
  borderLeft: `4px solid`,
  borderColor: theme.palette.grey[400],
  padding: theme.spacing(1, 0),
  paddingLeft: theme.spacing(3),
  margin: theme.spacing(3, 0),
  display: 'block',
  backgroundColor: theme.palette.background.paper,
  '& p': {
    margin: 0,
  },
}))
Example #10
Source File: Files.tsx    From NekoMaid with MIT License 6 votes vote down vote up 
StyledTreeItem = styled((props: TreeItemProps) => <TreeItem {...props} />)(({ theme }) => ({
  [`& .${treeItemClasses.label}`]: {
    display: 'flex',
    paddingLeft: '0!important',
    '& embed': {
      width: 'inherit',
      height: 'inherit'
    },
    [`& .${iconClasses.root}`]: {
      margin: '-2px 4px 0 0'
    }
  },
  [`& .${treeItemClasses.group}`]: {
    marginLeft: 15,
    borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`
  }
}))
Example #11
Source File: PrincipleCard.tsx    From frontend with MIT License 6 votes vote down vote up 
StyledCard = styled(Card)(({ theme }) => ({
  [`& .${classes.contentContainer}`]: {
    padding: theme.spacing(0),
    margin: theme.spacing(2, 0),
    '&:last-child': {
      paddingBottom: theme.spacing(0),
    },
  },

  [`& .${classes.heading}`]: {
    color: theme.palette.primary.main,
    display: 'block',
    fontSize: theme.typography.pxToRem(18),
  },

  [`& .${classes.content}`]: {
    marginBottom: theme.spacing(0),
    paddingRight: theme.spacing(6),
  },

  [`& .${classes.cardHeader}`]: {
    padding: theme.spacing(0),
  },

  [`& .${classes.cardHeaderAction}`]: {
    margin: theme.spacing(0),
    alignSelf: 'center',
  },

  [`& .${classes.cardHeaderTitleRoot}`]: {
    flexGrow: 1,
    flex: 0,
  },

  [`& .${classes.icon}`]: {
    fontSize: theme.spacing(5),
  },
}))
Example #12
Source File: UserFormStyles.tsx    From bouncecode-cms with GNU General Public License v3.0 5 votes vote down vote up 
UserForm = styled('form')(({theme}) => ({
  width: '100%', // Fix IE 11 issue.
  marginTop: theme.spacing(3),
}))
Example #13
Source File: notify.tsx    From wallet-adapter with Apache License 2.0 5 votes vote down vote up 
StyledLaunchIcon = styled(LaunchIcon)(() => ({
    fontSize: 20,
    marginLeft: 8,
}))
Example #14
Source File: mdxRenderer.tsx    From usehooks-ts with MIT License 5 votes vote down vote up 
TableCell = styled(MuiTableCell)(({ theme }) => ({
  background: theme.palette.background.default,
}))
Example #15
Source File: UserFormStyles.tsx    From bouncecode-cms with GNU General Public License v3.0 5 votes vote down vote up 
UserFormSubmit = styled(Button)(({theme}) => ({
  margin: theme.spacing(3, 0, 2),
}))
Example #16
Source File: mdxRenderer.tsx    From usehooks-ts with MIT License 5 votes vote down vote up 
Title = styled(Typography)(({ theme }) => ({
  marginTop: theme.spacing(4),
}))
Example #17
Source File: UserFormStyles.tsx    From bouncecode-cms with GNU General Public License v3.0 5 votes vote down vote up 
UserFormAvatar = styled('div')(({theme}) => ({
  margin: theme.spacing(1),
  backgroundColor: theme.palette.secondary.main,
}))
Example #18
Source File: FirstStep.tsx    From frontend with MIT License 5 votes vote down vote up 
Root = styled('div')(() => ({
  [`& .${classes.divider}`]: {
    border: '1px solid #000000',
  },
}))
Example #19
Source File: mdxRenderer.tsx    From usehooks-ts with MIT License 5 votes vote down vote up 
Divider = styled(MuiDivider)(({ theme }) => ({
  margin: theme.spacing(3, 0),
}))
Example #20
Source File: UserFormStyles.tsx    From bouncecode-cms with GNU General Public License v3.0 5 votes vote down vote up 
UserFormPaper = styled('div')(({theme}) => ({
  marginTop: theme.spacing(8),
  marginBottom: theme.spacing(8),
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
}))
Example #21
Source File: notify.tsx    From wallet-adapter with Apache License 2.0 5 votes vote down vote up 
Notification = styled('span')(() => ({
    display: 'flex',
    alignItems: 'center',
}))
Example #22
Source File: DiscordImage.tsx    From frontend with MIT License 5 votes vote down vote up 
StyledExternalLink = styled(ExternalLink)(({ theme }) => ({
  [`& .${classes.teamImage}`]: {
    maxWidth: '100%',
    marginTop: theme.spacing(3),
    padding: theme.spacing(0, 2),
  },
}))
Example #23
Source File: Link.tsx    From tams-club-cal with MIT License 5 votes vote down vote up 
Anchor = styled('a')({})
Example #24
Source File: PodkrepiLogo.tsx    From frontend with MIT License 5 votes vote down vote up 
Root = styled('svg')(({ theme }) => ({
  [`& .${classes.icon}`]: { fill: theme.palette.primary.main },
  [`& .${classes.iconAccent}`]: { fill: theme.palette.secondary.main },

  [`& .${classes.letters}`]: {
    fill: theme.palette.getContrastText(theme.palette.primary.main),
  },
}))
Example #25
Source File: input.tsx    From usehooks-ts with MIT License 5 votes vote down vote up 
Form = styled('form')(({ theme }) => ({
  display: 'flex',
  borderRadius: theme.shape.borderRadius,
  margin: theme.spacing(0),
}))
Example #26
Source File: BankTransfer.tsx    From frontend with MIT License 5 votes vote down vote up 
StyledGrid = styled(Grid)(() => ({
  [`&.${classes.firstRow}`]: {
    lineHeight: '2rem',
    paddingTop: '1rem',
  },
}))
Example #27
Source File: Link.tsx    From mui-toolpad with MIT License 5 votes vote down vote up 
Anchor = styled('a')({})
Example #28
Source File: ProgressBarWrapper.tsx    From console with GNU Affero General Public License v3.0 5 votes vote down vote up 
SmallBorderLinearProgress = styled(BorderLinearProgress)(() => ({
  height: 6,
  borderRadius: 3,
  [`& .${linearProgressClasses.bar}`]: {
    borderRadius: 3,
  },
}))
Example #29
Source File: HeadingSeparator.tsx    From frontend with MIT License 5 votes vote down vote up 
Root = styled('hr')({
  [`&.${classes.separator}`]: {
    border: 'none',
    borderBottom: '1px solid lightgrey',
    margin: '0 0 10px 0',
  },
})