@mui/system#styled TypeScript Examples

The following examples show how to use @mui/system#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: ThumbSide.tsx From genshin-optimizer with MIT License

6 votes

ThumbSide = styled("img")(({ theme }) => ({
  display: "inline-block",
  width: "auto",
  height: `2.3em`,
  lineHeight: 1,
  verticalAlign: "text-bottom",
  marginTop: theme.spacing(-3),
  marginLeft: theme.spacing(-1.25),
  marginRight: theme.spacing(-1),
  marginBottom: theme.spacing(-1),
}))

Example #2

Source File: ReaderNavBar.tsx From Tachidesk-WebUI with Mozilla Public License 2.0

6 votes

ChapterNavigation = styled('div')({
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gridTemplateAreas: '"prev next"',
    gridColumnGap: '5px',
    margin: '10px 0',

    '& a': {
        flexGrow: 1,
        textDecoration: 'none',

        '& button': {
            width: '100%',
            padding: '5px 8px',
            textTransform: 'none',
        },
    },
})

Example #3

Source File: ReaderNavBar.tsx From Tachidesk-WebUI with Mozilla Public License 2.0

6 votes

OpenDrawerButton = styled(IconButton)(({ theme }) => ({
    position: 'fixed',
    top: 0 + 20,
    left: 10 + 20,
    height: '40px',
    width: '40px',
    borderRadius: 5,
    backgroundColor: theme.palette.mode === 'dark' ? 'black' : 'white',
    '&:hover': {
        backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : theme.palette.grey[100],
    },
}))

Example #4

Source File: styles.ts From Cromwell with MIT License

6 votes

StyledInputElement = styled('input')`
  color: #20262d;
  transition: width 300ms ease;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4375em;
  border: none;
  background-color: transparent;

  &:focus {
    outline: none;
  }
`

Example #5

Source File: ChapterList.tsx From Tachidesk-WebUI with Mozilla Public License 2.0

6 votes

CustomVirtuoso = styled(Virtuoso)(({ theme }) => ({
    listStyle: 'none',
    padding: 0,
    minHeight: '200px',
    [theme.breakpoints.up('md')]: {
        width: '50vw',
        // 64px for the Appbar, 48px for the ChapterCount Header
        height: 'calc(100vh - 64px - 48px)',
        margin: 0,
    },
}))

Example #6

Source File: SourceCard.tsx From Tachidesk-WebUI with Mozilla Public License 2.0

6 votes

WiderWidthButtons = styled('div')(({ theme }) => ({
    display: 'flex',
    [theme.breakpoints.down('sm')]: {
        display: 'none',
    },

    '& .MuiButton-root': {
        marginLeft: '20px',
    },
}))

Example #7

Source File: DesktopSideBar.tsx From Tachidesk-WebUI with Mozilla Public License 2.0

6 votes

SideNavBarContainer = styled('div')(({ theme }) => ({
    height: '100vh',
    width: theme.spacing(8),
    backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
    position: 'fixed',
    top: 0,
    left: 0,
    paddingTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
}))

Example #8

Source File: MangaCard.tsx From Tachidesk-WebUI with Mozilla Public License 2.0

6 votes

BadgeContainer = styled('div')({
    display: 'flex',
    position: 'absolute',
    top: 5,
    left: 5,
    height: 'fit-content',
    borderRadius: '5px',
    overflow: 'hidden',
    '& p': {
        color: 'white',
        padding: '0.1em',
        paddingInline: '0.2em',
        fontSize: '1.05rem',
    },
})

Example #9

Source File: MobileBottomBar.tsx From Tachidesk-WebUI with Mozilla Public License 2.0

6 votes

BottomNavContainer = styled('div')(({ theme }) => ({
    bottom: 0,
    left: 0,
    height: theme.spacing(7),
    width: '100vw',
    backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
    position: 'fixed',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    // For Some reason the theme is throwing and error when accessing the Zindex object,
    // This is the zIndex of the appBar in the default theme
    zIndex: 1100,
}))

Example #10

Source File: SearchModal.tsx From usehooks-ts with MIT License

6 votes

Paper = styled(MuiPaper)(({ theme }) => ({
  width: '100%',
  maxWidth: '600px',
  height: '100%',
  position: 'absolute',
  top: 0,
  left: '50%',
  transform: 'translateX(-50%)',
  border: '0.2px solid',
  borderColor:
    theme.palette.mode === 'light'
      ? theme.palette.common.black
      : theme.palette.primary.main,
  borderRadius: theme.shape.borderRadius,
  overflow: 'hidden',
  display: 'flex',
  backgroundImage: 'none',

  [theme.breakpoints.up('sm')]: {
    top: '10%',
    height: '70%',
  },
}))

Example #11

Source File: Info.tsx From frontend with MIT License

6 votes

CssTextField = styled(FormTextField)({
  '& label': {
    marginLeft: '8px',
  },
  '& .MuiOutlinedInput-root': {
    margin: '20px 0',
    padding: '20px',
  },
})

Example #12

Source File: styled.ts From react-pwa with MIT License

6 votes

HotKeysButton = styled(Button)(({ theme }) => ({
  height: 'fit-content',
  alignSelf: 'center',
  marginRight: theme.spacing(1),
  borderColor: theme.palette.text.disabled,
  '&:hover': {
    borderColor: theme.palette.text.disabled,
  },
  color: theme.palette.text.disabled,
}))

Example #13

Source File: TalentIcon.tsx From genshin-optimizer with MIT License

5 votes

TalentIcon = styled("img", {
  name: 'TalentIcon',
  slot: 'Root',
})<TalentIconProps>(({ theme, element }) => ({
  backgroundImage: `linear-gradient(${theme.palette[element].light},${theme.palette[element].dark})`,
  borderRadius: "50%"
}))

Example #14

Source File: ReaderNavBar.tsx From Tachidesk-WebUI with Mozilla Public License 2.0

5 votes

Root = styled('div')(({ theme }) => ({
    top: 0,
    left: 0,
    width: '300px',
    minWidth: '300px',
    height: '100vh',
    overflowY: 'auto',
    backgroundColor: theme.palette.background.default,

    '& header': {
        backgroundColor:
        theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
        display: 'flex',
        alignItems: 'center',
        minHeight: '64px',
        paddingLeft: '24px',
        paddingRight: '24px',

        transition: 'left 2s ease',

        '& button': {
            flexGrow: 0,
            flexShrink: 0,
        },

        '& button:nth-child(1)': {
            marginRight: '16px',
        },

        '& h1': {
            fontSize: '1.25rem',
            flexGrow: 1,
        },
    },
    '& hr': {
        margin: '0 16px',
        height: '1px',
        border: '0',
        backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
    },
}))

Example #15

Source File: DoublePage.tsx From Tachidesk-WebUI with Mozilla Public License 2.0

5 votes

Image = styled('img')({
    marginBottom: 0,
    width: 'auto',
    minHeight: '99vh',
    height: 'auto',
    maxHeight: '99vh',
    objectFit: 'contain',
})

Example #16

Source File: MobileBottomBar.tsx From Tachidesk-WebUI with Mozilla Public License 2.0

5 votes

Link = styled(RRDLink)({
    textDecoration: 'none',
    flex: 1,
})

Example #17

Source File: SearchModal.tsx From usehooks-ts with MIT License

5 votes

ModalContent = styled('div')(() => ({
  display: 'flex',
  flexDirection: 'column',
  flex: 1,
  overflow: 'hidden',
}))

Example #18

Source File: Contacts.tsx From frontend with MIT License

5 votes

CssTextField = styled(FormTextField)({
  '& .MuiOutlinedInput-root': {
    borderRadius: '50px',
    height: '40px',
  },
})

Example #19

Source File: styled.ts From react-pwa with MIT License

5 votes

FlexBox = styled(Box)({
  display: 'flex',
})

Example #20

Source File: styled.ts From react-pwa with MIT License

5 votes

CenteredFlexBox = styled(FlexBox)({
  justifyContent: 'center',
  alignItems: 'center',
})

Example #21

Source File: styled.ts From react-pwa with MIT License

5 votes

FullSizeCenteredFlexBox = styled(CenteredFlexBox)({
  width: '100%',
  height: '100%',
})

Example #22

Source File: styled.ts From react-pwa with MIT License

5 votes

Image = styled('img')({
  width: '10%',
  height: '10%',
  margin: 4,
})

Example #23

Source File: ReaderNavBar.tsx From Tachidesk-WebUI with Mozilla Public License 2.0

5 votes

Navigation = styled('div')({
    margin: '0 16px',
    '& > span:nth-child(1)': {
        textAlign: 'center',
        display: 'block',
        marginTop: '16px',
    },
})

Example #24

Source File: SourceCard.tsx From Tachidesk-WebUI with Mozilla Public License 2.0

5 votes

MobileWidthButtons = styled('div')(({ theme }) => ({
    display: 'flex',
    [theme.breakpoints.up('sm')]: {
        display: 'none',
    },
}))

Example #25

Source File: MangaCard.tsx From Tachidesk-WebUI with Mozilla Public License 2.0

5 votes

MangaTitle = styled(Typography)({
    position: 'absolute',
    bottom: 0,
    padding: '0.5em',
    color: 'white',
    fontSize: '1.05rem',
    textShadow: '0px 0px 3px #000000',
})

Example #26

Source File: MangaCard.tsx From Tachidesk-WebUI with Mozilla Public License 2.0

5 votes

BottomGradientDoubledDown = styled('div')({
    position: 'absolute',
    bottom: 0,
    width: '100%',
    height: '20%',
    background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
})

Example #27

Source File: MangaCard.tsx From Tachidesk-WebUI with Mozilla Public License 2.0

5 votes

BottomGradient = styled('div')({
    position: 'absolute',
    bottom: 0,
    width: '100%',
    height: '30%',
    background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
})

Example #28

Source File: index.tsx From abrechnung with GNU Affero General Public License v3.0

5 votes

MobilePaper = styled(Paper)(({ theme }) =>
    sx({
        padding: { xs: 1, lg: 2 },
        boxShadow: { xs: 0, lg: 1 },
    })
)

Example #29

Source File: styled-span.tsx From tams-club-cal with MIT License

5 votes

StyledSpan = styled('span')``