@mui/material#styled TypeScript Examples

The following examples show how to use @mui/material#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: index.tsx    From mui-toolpad with MIT License 6 votes vote down vote up 
EditorRoot = styled('div')(({ theme }) => ({
  height: '100vh',
  display: 'flex',
  flexDirection: 'column',
  overflow: 'hidden',
  [`& .${classes.content}`]: {
    flex: 1,
    display: 'flex',
    flexDirection: 'row',
    overflow: 'hidden',
  },
  [`& .${classes.hierarchyPanel}`]: {
    width: 250,
    borderRight: `1px solid ${theme.palette.divider}`,
  },
  [`& .${classes.editorPanel}`]: {
    flex: 1,
    overflow: 'hidden',
  },
}))
Example #2
Source File: CustomNumberInput.tsx    From genshin-optimizer with MIT License 6 votes vote down vote up 
Wrapper = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  padding: 0,
  overflow: "hidden",
  "div": {
    width: "100%",
    height: "100%",
  },
}))
Example #3
Source File: WalletMultiButton.tsx    From wallet-adapter with Apache License 2.0 6 votes vote down vote up 
StyledMenu = styled(Menu)(({ theme }: { theme: Theme }) => ({
    '& .MuiList-root': {
        padding: 0,
    },
    '& .MuiListItemIcon-root': {
        marginRight: theme.spacing(),
        minWidth: 'unset',
        '& .MuiSvgIcon-root': {
            width: 20,
            height: 20,
        },
    },
}))
Example #4
Source File: ModalWrapper.tsx    From genshin-optimizer with MIT License 6 votes vote down vote up 
ModalContainer = styled(Container)(({ theme }) => ({
  padding: 0,
  minHeight: "100%",
  display: "flex", flexDirection: "column", justifyContent: "center",
  pointerEvents: "none",
  "& > *": {
    pointerEvents: "auto"
  }
}))
Example #5
Source File: index.tsx    From mui-toolpad with MIT License 6 votes vote down vote up 
PageEditorRoot = styled('div')(({ theme }) => ({
  width: '100%',
  height: '100%',
  display: 'flex',
  flexDirection: 'row',
  overflow: 'hidden',
  [`& .${classes.renderPanel}`]: {
    flex: 1,
  },
  [`& .${classes.componentPanel}`]: {
    width: 300,
    borderLeft: `1px solid ${theme.palette.divider}`,
  },
}))
Example #6
Source File: code.tsx    From usehooks-ts with MIT License 6 votes vote down vote up 
Root = styled('div')(({ theme }) => ({
  [`&.${classes.root}`]: {
    position: 'relative',
  },

  [`& .${classes.copyButton}`]: {
    position: 'absolute',
    top: theme.spacing(2),
    right: theme.spacing(2),
    color: theme.palette.common.white,
  },

  [`& .${classes.pre}`]: {
    textAlign: 'left',
    margin: theme.spacing(2, 0),
    padding: theme.spacing(3, 2),
    borderRadius: 4,
    fontFamily: 'Fira Code, monospace',
    overflowX: 'auto',
    boxShadow: theme.shadows[6],
  },

  [`& .${classes.line}`]: {
    display: 'inline-block',
    width: theme.spacing(4),
    userSelect: 'none',
    color: theme.palette.dracula.comment,
  },
}))
Example #7
Source File: PinholeOverlay.tsx    From mui-toolpad with MIT License 6 votes vote down vote up 
PinholeOverlayRoot = styled('div')({
  pointerEvents: 'none !important' as 'none',
  position: 'relative',
  '> div': {
    pointerEvents: 'initial !important',
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    background: '#000',
    opacity: 0.03,
  },
})
Example #8
Source File: index.tsx    From Search-Next with GNU General Public License v3.0 6 votes vote down vote up 
StyledTableRow = styled(TableRow)(({ theme }) => ({
  '&:nth-of-type(odd)': {
    backgroundColor: theme.palette.action.hover,
  },
  // hide last border
  '&:last-child td, &:last-child th': {
    border: 0,
  },
}))
Example #9
Source File: DesktopSearch.tsx    From GTAV-NativeDB with MIT License 6 votes vote down vote up 
StyledInputBase = styled(InputBase)(({ theme }) => ({
  color: 'inherit',
  width: '100%',
  '& .MuiInputBase-input': {
    padding: theme.spacing(1, 1, 1, 0),
    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
    transition: theme.transitions.create('width'),
    width: '100%'
  }
}))
Example #10
Source File: CustomNumberInput.tsx    From genshin-optimizer with MIT License 6 votes vote down vote up 
StyledInputBase = styled(InputBase)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  transition: "all 0.5s ease",
  "&:hover": {
    backgroundColor: theme.palette.primary.dark,
  },
  "&.Mui-focused": {
    backgroundColor: theme.palette.primary.dark,
  },
  "&.Mui-disabled": {
    backgroundColor: theme.palette.primary.dark,
  },
}))
Example #11
Source File: index.tsx    From Search-Next with GNU General Public License v3.0 6 votes vote down vote up 
StyledMenu = styled((props: MMenuProps) => (
  <MMenu
    elevation={0}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'right',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'right',
    }}
    {...props}
  />
))(({ theme }) => ({
  '& .MuiPaper-root': {
    backgroundColor: 'rgba(253, 253, 253, 0.8)',
    backdropFilter: 'blur(8px)',
    borderRadius: 4,
    marginTop: theme.spacing(1),
    minWidth: 140,
    color:
      theme.palette.mode === 'light'
        ? 'rgb(55, 65, 81)'
        : theme.palette.grey[300],
    boxShadow:
      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
    '& .MuiMenu-list': {
      padding: '4px',
    },
  },
}))
Example #12
Source File: BaseGameTimeSlider.tsx    From rewind with MIT License 6 votes vote down vote up 
PlaybarEventsCanvas = styled("canvas")`
  //background: aqua;
  position: absolute;
  height: 40px;
  width: 100%;
  top: 0;
  left: 0;
  transform: translate(0, -50%);
`
Example #13
Source File: index.tsx    From Search-Next with GNU General Public License v3.0 6 votes vote down vote up 
StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: theme.palette.common.white,
    color: theme.palette.common.black,
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 14,
  },
}))
Example #14
Source File: BootstrapTooltip.tsx    From genshin-optimizer with MIT License 6 votes vote down vote up 
BootstrapTooltip = styled(({ className, ...props }: TooltipProps) => (
  <Tooltip {...props} arrow classes={{ popper: className }} />
))(({ theme }) => ({
  [`& .${tooltipClasses.arrow}`]: {
    color: theme.palette.common.black,
  },
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: theme.palette.common.black,
    maxWidth: 500,
  },
}))
Example #15
Source File: ThemeEditor.tsx    From mui-toolpad with MIT License 5 votes vote down vote up 
IconToggleButton = styled(ToggleButton)({
  display: 'flex',
  justifyContent: 'center',
  width: '100%',
  '& > *': {
    marginRight: '8px',
  },
})
Example #16
Source File: WalletMultiButton.tsx    From wallet-adapter with Apache License 2.0 5 votes vote down vote up 
WalletMenuItem = styled(WalletActionMenuItem)(({ theme }: { theme: Theme }) => ({
    padding: 0,

    '& .MuiButton-root': {
        borderRadius: 0,
    },
}))
Example #17
Source File: ComponentEditor.tsx    From mui-toolpad with MIT License 5 votes vote down vote up 
ComponentPropsEditorRoot = styled('div')(({ theme }) => ({
  [`& .${classes.control}`]: {
    margin: theme.spacing(1, 0),
  },
}))
Example #18
Source File: select.tsx    From Search-Next with GNU General Public License v3.0 5 votes vote down vote up 
StyledSelect = styled((props: MSelectProps) => (
  <MSelect ref={props.inputRef} inputRef={props.inputRef} {...props} />
))(({ theme }) => ({
  '& .MuiSelect-select': {},
  input: {
    padding: '8.5px 14px',
  },
}))
Example #19
Source File: WalletMultiButton.tsx    From wallet-adapter with Apache License 2.0 5 votes vote down vote up 
WalletActionMenuItem = styled(MenuItem)(({ theme }: { theme: Theme }) => ({
    padding: theme.spacing(1, 2),
    boxShadow: 'inset 0 1px 0 0 ' + 'rgba(255, 255, 255, 0.1)',

    '&:hover': {
        boxShadow: 'inset 0 1px 0 0 ' + 'rgba(255, 255, 255, 0.1)' + ', 0 1px 0 0 ' + 'rgba(255, 255, 255, 0.05)',
    },
}))
Example #20
Source File: EditorCanvasHost.tsx    From mui-toolpad with MIT License 5 votes vote down vote up 
CanvasRoot = styled('div')({
  width: '100%',
  position: 'relative',
})
Example #21
Source File: WalletIcon.tsx    From wallet-adapter with Apache License 2.0 5 votes vote down vote up 
Img = styled('img')(({ theme }: { theme: Theme }) => ({
    width: theme.spacing(3),
    height: theme.spacing(3),
}))
Example #22
Source File: PagePanel.tsx    From mui-toolpad with MIT License 5 votes vote down vote up 
PagePanelRoot = styled('div')({
  display: 'flex',
  flexDirection: 'column',
})
Example #23
Source File: index.tsx    From Search-Next with GNU General Public License v3.0 5 votes vote down vote up 
Input = styled('input')({
  display: 'none',
})
Example #24
Source File: ToolpadShell.tsx    From mui-toolpad with MIT License 5 votes vote down vote up 
ToolpadShellRoot = styled('div')({
  width: '100vw',
  height: '100vh',
  display: 'flex',
  flexDirection: 'column',
})
Example #25
Source File: WalletDialog.tsx    From wallet-adapter with Apache License 2.0 5 votes vote down vote up 
RootDialog = styled(Dialog)(({ theme }: { theme: Theme }) => ({
    '& .MuiDialog-paper': {
        width: theme.spacing(40),
        margin: 0,
    },
    '& .MuiDialogTitle-root': {
        backgroundColor: theme.palette.primary.main,
        display: 'flex',
        justifyContent: 'space-between',
        lineHeight: theme.spacing(5),
        '& .MuiIconButton-root': {
            flexShrink: 1,
            padding: theme.spacing(),
            marginRight: theme.spacing(-1),
            color: theme.palette.grey[500],
        },
    },
    '& .MuiDialogContent-root': {
        padding: 0,
        '& .MuiCollapse-root': {
            '& .MuiList-root': {
                background: theme.palette.grey[900],
            },
        },
        '& .MuiList-root': {
            background: theme.palette.grey[900],
            padding: 0,
        },
        '& .MuiListItem-root': {
            boxShadow: 'inset 0 1px 0 0 ' + 'rgba(255, 255, 255, 0.1)',
            '&:hover': {
                boxShadow:
                    'inset 0 1px 0 0 ' + 'rgba(255, 255, 255, 0.1)' + ', 0 1px 0 0 ' + 'rgba(255, 255, 255, 0.05)',
            },
            padding: 0,
            '& .MuiButton-endIcon': {
                margin: 0,
            },
            '& .MuiButton-root': {
                color: theme.palette.text.primary,
                flexGrow: 1,
                justifyContent: 'space-between',
                padding: theme.spacing(1, 3),
                borderRadius: undefined,
                fontSize: '1rem',
                fontWeight: 400,
            },
            '& .MuiSvgIcon-root': {
                color: theme.palette.grey[500],
            },
        },
    },
}))
Example #26
Source File: BuildAlert.tsx    From genshin-optimizer with MIT License 5 votes vote down vote up 
BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
  height: 10,
  borderRadius: 5,
}))
Example #27
Source File: UpdateDialog.tsx    From GTAV-NativeDB with MIT License 5 votes vote down vote up 
UnorderedList = styled('ul')(({ theme }) => ({
  marginTop: 0,
  paddingLeft: theme.spacing(2)
}))
Example #28
Source File: BaseGameTimeSlider.tsx    From rewind with MIT License 5 votes vote down vote up 
DifficultyCanvas = styled("canvas")`
  //position: absolute;
  //top: 0;
  //left: 0;
  //transform: translate(0, -100%);
  //background: aqua;
`
Example #29
Source File: Markdown.tsx    From airmessage-web with Apache License 2.0 5 votes vote down vote up 
SpacedListItem = styled("li")(({ theme }) => ({
	marginTop: theme.spacing(1),
}))