@material-ui/styles#styled TypeScript Examples

The following examples show how to use @material-ui/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: WarningFooter.tsx    From homebase-app with MIT License 6 votes vote down vote up 
ContainerText = styled(Typography)({
  maxWidth: 1160,
  fontWeight: 400,
  color: "inherit",
  fontSize: "18px",

  ["@media (max-width:1030px)"]: { 
    fontSize: "16px",
  },
})
Example #2
Source File: index.tsx    From homebase-app with MIT License 6 votes vote down vote up 
ProgressText = styled(Typography)(
  ({textColor}: { textColor: string }) => ({
    color: textColor,
    display: "flex",
    alignItems: "center",
    position: "absolute",
    width: "100%",
    height: "100%",
    fontSize: 16,
    userSelect: "none",
    boxShadow: "none",
    background: "inherit",
    fontFamily: "Roboto Mono",
    justifyContent: "center",
    top: 0,
  })
)
Example #3
Source File: index.tsx    From homebase-app with MIT License 6 votes vote down vote up 
HistoryItem = styled(Grid)(({theme}: { theme: Theme }) => ({
  marginTop: 20,
  paddingBottom: 12,
  display: "flex",
  height: "auto",

  [theme.breakpoints.down("sm")]: {
    width: "unset",
  },
}))
Example #4
Source File: ConnectMessage.tsx    From homebase-app with MIT License 6 votes vote down vote up 
Container = styled(Grid)(({ theme }: { theme: Theme }) => ({
  background: theme.palette.primary.main,
  width: "100%",
  maxWidth: "calc(100vw - 48px)",
  wordBreak: "break-all",
  borderRadius: 8,
  boxSizing: "border-box",
  padding: 32,
}))
Example #5
Source File: WarningFooter.tsx    From homebase-app with MIT License 6 votes vote down vote up 
Container = styled(Box)({
  position: "fixed",
  width: "100%",
  minHeight: 92,
  bottom: 0,
  background: hexToRgba("#746438", 0.95),
  boxSizing: "border-box",
  padding: "25px 50px",
  color: "#FFC839",
  zIndex: 10000,
})
Example #6
Source File: index.tsx    From homebase-app with MIT License 5 votes vote down vote up 
VotedText = styled(Typography)({
  fontSize: 18,
})
Example #7
Source File: index.tsx    From homebase-app with MIT License 5 votes vote down vote up 
VoteButton = styled(Button)(({favor}: { favor: boolean }) => ({
  backgroundColor: favor ? "#3FE888" : "#FF486E",
}))
Example #8
Source File: index.tsx    From homebase-app with MIT License 5 votes vote down vote up 
ContentBlockItem = styled(Grid)({
  padding: "35px 52px",
  borderTop: `0.3px solid #5E6969`,
})
Example #9
Source File: index.tsx    From homebase-app with MIT License 5 votes vote down vote up 
BalancesHeader = styled(Grid)(({ theme }: { theme: Theme }) => ({
  minHeight: "178px",
  padding: "46px 55px",
  background: theme.palette.primary.main,
  boxSizing: "border-box",
  borderRadius: 8,
  boxShadow: "none",
}))
Example #10
Source File: index.tsx    From homebase-app with MIT License 5 votes vote down vote up 
MainContainer = styled(Box)({
  width: "100%",
})
Example #11
Source File: index.tsx    From homebase-app with MIT License 5 votes vote down vote up 
UsernameText = styled(Typography)({
  fontSize: 28,
  wordBreak: "break-all"
})
Example #12
Source File: index.tsx    From homebase-app with MIT License 5 votes vote down vote up 
ProposalTitle = styled(Typography)({
  fontWeight: "bold",
})
Example #13
Source File: index.tsx    From homebase-app with MIT License 5 votes vote down vote up 
StatusText = styled(Typography)({
  textTransform: "uppercase",
  marginLeft: 10,
  fontSize: 18,
  marginRight: 30,
})
Example #14
Source File: Header.tsx    From homebase-app with MIT License 5 votes vote down vote up 
StyledToolbar = styled(Toolbar)({
  display: "flex",
  padding: "22px 37px",
  boxSizing: "border-box",
  justifyContent: "space-between",
  flexWrap: "wrap",
})
Example #15
Source File: FAQItem.tsx    From homebase-app with MIT License 5 votes vote down vote up 
TableContainer = styled(ContentContainer)({
  width: "100%",
})
Example #16
Source File: FAQItem.tsx    From homebase-app with MIT License 5 votes vote down vote up 
AccordionHeader = styled(AccordionSummary)({
  minHeight: 40,
  padding: "20px 40px",
  background: "rgb(47, 52, 56)",
})
Example #17
Source File: FAQItem.tsx    From homebase-app with MIT License 5 votes vote down vote up 
AccordionContent = styled(AccordionDetails)({
  flexDirection: "column",
  padding: "35px 40px",
  background: "rgb(47, 52, 56)",
})
Example #18
Source File: Header.tsx    From homebase-app with MIT License 5 votes vote down vote up 
StyledAppBar = styled(AppBar)({
  boxShadow: "none",
})
Example #19
Source File: Header.tsx    From homebase-app with MIT License 5 votes vote down vote up 
LogoItem = styled("img")({
  cursor: "pointer",
  paddingTop: 8,
  height: "30px",
})
Example #20
Source File: Header.tsx    From homebase-app with MIT License 5 votes vote down vote up 
LogoText = styled(Typography)({
  fontWeight: "bold",
  fontSize: "24px",
  cursor: "pointer",
  fontFamily: "Roboto",
  letterSpacing: "initial",
})
Example #21
Source File: NFT.tsx    From homebase-app with MIT License 5 votes vote down vote up 
NFTVideo = styled("video")({
  maxHeight: "100%",
  maxWidth: "100%",
  width: "auto",
  margin: "auto",
  display: "block",
})
Example #22
Source File: index.tsx    From homebase-app with MIT License 5 votes vote down vote up 
DetailsText = styled(Typography)({
  wordBreak: "break-all",
})
Example #23
Source File: index.tsx    From homebase-app with MIT License 5 votes vote down vote up 
QuorumTitle = styled(Typography)(() => ({
  color: "#3866F9",
}))
Example #24
Source File: NFT.tsx    From homebase-app with MIT License 5 votes vote down vote up 
StyledLink = styled(Link)({
  display: "block",
  height: "100%",
})
Example #25
Source File: index.tsx    From homebase-app with MIT License 5 votes vote down vote up 
Container = styled(ContentContainer)({
  padding: "36px 45px",
})
Example #26
Source File: NFT.tsx    From homebase-app with MIT License 5 votes vote down vote up 
NFTImg = styled("img")({
  maxHeight: "100%",
  maxWidth: "100%",
  width: "auto",
  display: "block",
})
Example #27
Source File: ProfileAvatar.tsx    From homebase-app with MIT License 5 votes vote down vote up 
StyledAvatar = styled(Avatar)(({ size }: { size?: number }) => ({
  width: size || 40,
  height: size || 40,
}))
Example #28
Source File: ProposalsList.tsx    From homebase-app with MIT License 5 votes vote down vote up 
ProposalsFooter = styled(Grid)({
  padding: "16px 46px",
  borderTop: ".6px solid rgba(125,140,139, 0.2)",
  minHeight: 34,
})
Example #29
Source File: ProposalsList.tsx    From homebase-app with MIT License 5 votes vote down vote up 
TableHeader = styled(Grid)({
  padding: "16px 46px",
  minHeight: 34
})