回答編集履歴
5
テキスト追加
test
CHANGED
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
|
|
99
99
|
|
|
100
100
|
|
|
101
|
-
は、`FONT_SIZE
|
|
101
|
+
は、`FONT_SIZE` のキーに `"medium"`が無いのでエラーになります。
|
|
102
102
|
|
|
103
103
|
|
|
104
104
|
|
4
テキスト追加
test
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
xl: 24
|
|
24
24
|
|
|
25
|
-
};
|
|
25
|
+
} as const;
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
|
3
テキスト追加
test
CHANGED
|
@@ -10,15 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
12
|
|
|
13
|
-
const FONT_SIZE_KEYS = [ "s", "b", "m", "l", "xl" ] as const;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
export type TFontSize = typeof FONT_SIZE_KEYS[number];
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
export const FONT_SIZE
|
|
13
|
+
export const FONT_SIZE = {
|
|
22
14
|
|
|
23
15
|
s: 12,
|
|
24
16
|
|
|
@@ -30,7 +22,11 @@
|
|
|
30
22
|
|
|
31
23
|
xl: 24
|
|
32
24
|
|
|
33
|
-
}
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
export type TFontSize = keyof typeof FONT_SIZE;
|
|
34
30
|
|
|
35
31
|
|
|
36
32
|
|
|
@@ -42,7 +38,7 @@
|
|
|
42
38
|
|
|
43
39
|
|
|
44
40
|
|
|
45
|
-
上記のようにすると、 `TFontSize` は実質
|
|
41
|
+
上記のようにすると、 `TFontSize` は、実質的に `"s" | "b" | "m" | "l" | "xl"` として機能するので、たとえば、以下のようなコンポーネント`Text`
|
|
46
42
|
|
|
47
43
|
|
|
48
44
|
|
|
@@ -108,4 +104,4 @@
|
|
|
108
104
|
|
|
109
105
|
|
|
110
106
|
|
|
111
|
-
|
|
107
|
+
以上、参考になれば幸いです。
|
2
テキスト追加
test
CHANGED
|
@@ -34,6 +34,10 @@
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
+
export const DEFAULT_SIZE = FONT_SIZE.m;
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
37
41
|
```
|
|
38
42
|
|
|
39
43
|
|
|
@@ -48,11 +52,7 @@
|
|
|
48
52
|
|
|
49
53
|
import styled from 'styled-components';
|
|
50
54
|
|
|
51
|
-
import { TFontSize, FONT_SIZE } from "./fontSize";
|
|
55
|
+
import { TFontSize, FONT_SIZE, DEFAULT_SIZE } from "./fontSize";
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
const DEFAULT_SIZE = 12;
|
|
56
56
|
|
|
57
57
|
|
|
58
58
|
|
|
@@ -64,11 +64,19 @@
|
|
|
64
64
|
|
|
65
65
|
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
const Text = styled.span`
|
|
68
68
|
|
|
69
69
|
font-size: ${(props: TProps) => props.size ? FONT_SIZE[props.size] : DEFAULT_SIZE}px;
|
|
70
70
|
|
|
71
71
|
`;
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
export default Text;
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
72
80
|
|
|
73
81
|
|
|
74
82
|
|
1
テキスト追加
test
CHANGED
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
|
|
57
57
|
|
|
58
58
|
|
|
59
|
-
type Props = {
|
|
59
|
+
type TProps = {
|
|
60
60
|
|
|
61
61
|
size?: TFontSize;
|
|
62
62
|
|
|
@@ -66,9 +66,7 @@
|
|
|
66
66
|
|
|
67
67
|
export const Text = styled.span`
|
|
68
68
|
|
|
69
|
-
font-size: ${(props: Props) => props.size ? FONT_SIZE[props.size] : DEFAULT_SIZE}px;
|
|
69
|
+
font-size: ${(props: TProps) => props.size ? FONT_SIZE[props.size] : DEFAULT_SIZE}px;
|
|
70
|
-
|
|
71
|
-
color: blue;
|
|
72
70
|
|
|
73
71
|
`;
|
|
74
72
|
|