Links com hacks e técnicas uteis para Javascript/Typescript
índice
Lista de Links
Técnicas e dicas úteis para resolver problemas de JavaScript: Este artigo contém uma variedade de técnicas e truques para resolver problemas comuns em JavaScript. Inclui exemplos de uso real para ilustrar as soluções.
1. Remover ou desestruturar propriedades.
typescript
1import styled from "@emotion/styled";
2import { Box, ButtonBase, ButtonBaseProps } from "@mui/material";
3import { Theme, useTheme } from "@mui/material/styles";
4
5export interface ButtonComplexProps extends ButtonBaseProps {
6 startIcon?: React.ReactNode;
7 wide?: boolean;
8}
9
10export default function ButtonComplex(props: ButtonComplexProps) {
11 const ImageButton = styled(ButtonBase)(({ theme }: { theme: Theme }) => ({
12 display: "inline-flex",
13 minWidth: "64px",
14 minHeight: "40px",
15 boxSizing: "border-box",
16 "&:hover, &.Mui-focusVisible": {
17 zIndex: 1,
18 "& .MuiBackdrop-root": {
19 opacity: 0.15,
20 },
21 "& .MuiImageMarked-root": {
22 opacity: 0,
23 },
24 "& .MuiTypography-root": {
25 border: "4px solid currentColor",
26 },
27 },
28 borderRadius: "6px",
29 backgroundColor: (theme as Theme).palette.primary[theme.palette.mode],
30 padding: "14px 12px",
31 color: (theme as Theme).palette.text.primary,
32 }));
33
34 const ButtonBackdrop = styled("div")(({ theme }) => {
35 const t = theme as Theme;
36 return {
37 position: "absolute",
38 left: 0,
39 right: 0,
40 top: 0,
41 bottom: 0,
42 backgroundColor: t.palette.common.black,
43 opacity: 0,
44 transition: t.transitions.create("opacity"),
45 width: "100%",
46 borderRadius: "6px",
47 };
48 });
49
50 const theme = useTheme();
51 const { wide, startIcon, ...otherProps } = props;
52 return (
53 <ImageButton theme={theme} {...otherProps}>
54 <ButtonBackdrop className="MuiBackdrop-root" />
55 <Box
56 sx={{
57 marginRight: "5px",
58 }}
59 >
60 {startIcon}
61 </Box>
62 {props.children}
63 </ImageButton>
64 );
65}
66link com tutorial de como desestruturar as propriedades
Compartilhe nas suas redes sociais.
Copiar
