@@ -16,11 +16,10 @@ Devup UI eliminates the performance degradation of the browser through the CSS i
1616
1717We develop a preprocessor that considers all grammatical cases.
1818
19-
2019## How it works
2120
22- ``` typescript
23- const before = <Box bg = { " red" } />
21+ ``` tsx
22+ const before = <Box bg = " red" />
2423
2524const after = <div className = " d0" />
2625```
@@ -29,8 +28,8 @@ const after = <div className="d0" />
2928
3029Devup UI supports responsive design.
3130
32- ```typescript
33- const before = <Box bg = {[" red" , " blue" ]} />
31+ ``` tsx
32+ const before = <Box bg = { [' red' , ' blue' ]} />
3433
3534const after = <div className = " d0 d1" />
3635```
@@ -39,12 +38,17 @@ const after = <div className="d0 d1" />
3938
4039Devup UI supports variables.
4140
42- ```typescript
41+ ``` tsx
4342const before = <Box bg = { colorVariable } />
4443
45- const after = <div className = " d0" style = {{
46- " --d0" : colorVariable
47- }}/>
44+ const after = (
45+ <div
46+ className = " d0"
47+ style = { {
48+ ' --d0' : colorVariable ,
49+ }}
50+ />
51+ )
4852```
4953
5054## Theme
@@ -66,29 +70,33 @@ Devup UI supports theme.
6670}
6771```
6872
69- ```typescript
70- <Text color = " $text" />
73+ ``` tsx
74+ <Text color = " $text" />
7175```
7276
7377## Expressions
7478
7579Devup UI supports expressions.
7680
77- ```typescript
78- const before = <Box bg = {a > b ? " yellow" : variable }/>
79-
80- const after = <Box className = {` d0 d1 ${a > b ? " d2" : " d3" } ` } style = {{
81- " --d2" : variable
82- }}/>
81+ ``` tsx
82+ const before = <Box bg = { a > b ? ' yellow' : variable } />
83+
84+ const after = (
85+ <Box
86+ className = { ` d0 d1 ${a > b ? ' d2' : ' d3' } ` }
87+ style = { {
88+ ' --d2' : variable ,
89+ }}
90+ />
91+ )
8392```
8493
8594## Pseudo Selector
8695
8796Devup UI supports pseudo selector.
8897
89- ```typescript
90- const before = <Box _hover = {{ bg: " red" }}/>
98+ ``` tsx
99+ const before = <Box _hover = { { bg: ' red' }} />
91100
92- const after = <Box className = { " d0" } />
101+ const after = <Box className = " d0" />
93102```
94-
0 commit comments