@material-ui/core/styles#styled TypeScript 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: Items.tsx    From backstage with Apache License 2.0 6 votes vote down vote up 
SidebarDivider = styled('hr')(
  {
    height: 1,
    width: '100%',
    background: '#383838',
    border: 'none',
    margin: '12px 0px',
  },
  { name: 'BackstageSidebarDivider' },
) as ComponentType<ComponentProps<'hr'> & StyledComponentProps<'root'>>
Example #2
Source File: Items.tsx    From backstage with Apache License 2.0 6 votes vote down vote up 
SidebarScrollWrapper = styled('div')(({ theme }) => {
  const scrollbarStyles = styledScrollbar(theme);
  return {
    flex: '0 1 auto',
    overflowX: 'hidden',
    // 5px space to the right of the scrollbar
    width: 'calc(100% - 5px)',
    // Display at least one item in the container
    // Question: Can this be a config/theme variable - if so, which? :/
    minHeight: '48px',
    overflowY: 'hidden',
    '@media (hover: none)': scrollbarStyles,
    '&:hover': scrollbarStyles,
  };
}) as ComponentType<ComponentProps<'div'> & StyledComponentProps<'root'>>
Example #3
Source File: Items.tsx    From backstage with Apache License 2.0 5 votes vote down vote up 
SidebarSpace = styled('div')(
  {
    flex: 1,
  },
  { name: 'BackstageSidebarSpace' },
) as ComponentType<ComponentProps<'div'> & StyledComponentProps<'root'>>
Example #4
Source File: Items.tsx    From backstage with Apache License 2.0 5 votes vote down vote up 
SidebarSpacer = styled('div')(
  {
    height: 8,
  },
  { name: 'BackstageSidebarSpacer' },
) as ComponentType<ComponentProps<'div'> & StyledComponentProps<'root'>>
Example #5
Source File: PullRequestCardPolicy.tsx    From backstage with Apache License 2.0 5 votes vote down vote up 
PullRequestCardPolicyContainer = styled('div')({
  display: 'flex',
  alignItems: 'center',
  flexWrap: 'wrap',
})
Example #6
Source File: PullRequestCardReviewers.tsx    From backstage with Apache License 2.0 5 votes vote down vote up 
PullRequestCardReviewersContainer = styled('div')({
  '& > *': {
    marginTop: 4,
    marginBottom: 4,
  },
})
Example #7
Source File: MainContainer.tsx    From twilio-voice-notification-app with Apache License 2.0 5 votes vote down vote up 
MainContainer = styled(Container)({
  paddingTop: '2rem',
})
Example #8
Source File: StyledCard.tsx    From twilio-voice-notification-app with Apache License 2.0 5 votes vote down vote up 
StyledCard = styled(Card)((props) => ({
  backgroundColor: props.theme.palette.background.paper,
}))