-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
83 lines (76 loc) · 2.51 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import Container from '@mui/material/Container';
import Chip, { chipClasses } from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
import { makeStyles, withStyles } from 'tss-react/mui';
import { Typography } from '@mui/material';
const useStylesActual = makeStyles()((theme) => ({
root: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
},
deleteIcon: {
color: theme.palette.primary.contrastText,
'&:hover': {
color: `${theme.palette.primary.contrastText}6`,
},
},
}));
const StyledChipActual = withStyles(Chip, (theme) => ({
root: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
},
deleteIcon: {
color: theme.palette.primary.contrastText,
'&:hover': {
color: `${theme.palette.primary.contrastText}6`,
},
},
}));
const useStylesExpected = makeStyles()((theme) => ({
root: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
[`& .${chipClasses.deleteIcon}`]: {
color: theme.palette.primary.contrastText,
'&:hover': {
color: `${theme.palette.primary.contrastText}6`,
},
},
},
}));
const StyledChipExpected = withStyles(Chip, (theme, _props, classes) => ({
root: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
[`& .${classes.deleteIcon}`]: {
color: theme.palette.primary.contrastText,
'&:hover': {
color: `${theme.palette.primary.contrastText}6`,
},
},
},
}));
function App() {
const { classes: classesActual } = useStylesActual();
const { classes: classesExpected } = useStylesExpected();
return (
<Container maxWidth="md" sx={{ my: 4 }}>
<Stack direction="column" spacing={1}>
<Typography variant="h4">Actual</Typography>
<Stack direction="row" spacing={1}>
<Chip label="Default chip" onDelete={() => {}} />
<Chip label="Chip with classes" onDelete={() => {}} classes={classesActual} />
<StyledChipActual label="Styled chip" onDelete={() => {}} />
</Stack>
<Typography variant="h4">Expected</Typography>
<Stack direction="row" spacing={1}>
<Chip label="Default chip" onDelete={() => {}} />
<Chip label="Chip with classes" onDelete={() => {}} classes={classesExpected} />
<StyledChipExpected label="Styled chip" onDelete={() => {}} />
</Stack>
</Stack>
</Container>
);
}
export default App;