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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102# ☘ Writing CSS in AFFiNE
In AFFiNE we have different ways of writing styles.
## MUI Styled
```jsx
import type { MouseEventHandler, ReactNode } from 'react';
import { styled } from '@toeverything/components/ui';
const CardContainer = styled('div')({
display: 'flex',
flexDirection: 'column',
backgroundColor: '#fff',
border: '1px solid #E2E7ED',
borderRadius: '5px',
});
const CardContent = styled('div')({
margin: '23px 52px 24px 19px',
});
const CardActions = styled('div')({
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
width: '100%',
height: '29px',
background: 'rgba(152, 172, 189, 0.1)',
borderRadius: '0px 0px 5px 5px',
padding: '6px 0 6px 19px',
fontSize: '12px',
fontWeight: '300',
color: '#98ACBD',
});
const PlusIcon = styled('div')({
marginRight: '9px',
fontWeight: '500',
lineHeight: 0,
'::before': {
content: '"+"',
},
});
export const Card = ({
children,
onAddItem,
}: {
children?: ReactNode,
onAddItem?: MouseEventHandler<HTMLDivElement>,
}) => {
return (
<CardContainer>
<CardContent>{children}</CardContent>
<CardActions onClick={onAddItem}>
<PlusIcon />
Add item
</CardActions>
</CardContainer>
);
};
```
## Using SCSS
```jsx
import styles from './tree-item.module.scss';
export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
() => {
return (
<li
ref={wrapperRef}
className={cx(
styles['Wrapper'],
clone && styles['clone'],
ghost && styles['ghost'],
indicator && styles['indicator']
)}
style={
{
'--spacing': `${indentationWidth * depth}px`
} as CSSProperties
}
{...props}
>
</li>
);
}
);
```
## Using CSS
```javascript
import 'codemirror/lib/codemirror.css';
import 'codemirror/lib/codemirror';
```