+```
## Variants
You can define additional styling variants for your components:
+```css
+Label {
+ color: red;
+}
- Label {
- color: red;
- }
-
- Label:emphasis {
- font-weight: bold;
- }
+Label:emphasis {
+ font-weight: bold;
+}
+```
They are compiled as CSS classes which then can be controlled from JS via
`variant` prop:
-
- // sets both classes with `color` and `font-weight`
-
+```js
+ // sets both classes with `color` and `font-weight`
+```
## Prop variants
You can define variants which are based on some JavaScript expression against
props:
-
- Label {
- color: red;
- }
-
- Label:prop(mode == "emphasis") {
- font-weight: bold;
- }
-
+```css
+Label {
+ color: red;
+}
+
+Label:prop(mode == "emphasis") {
+ font-weight: bold;
+}
+```
They are compiled as CSS classes which then can be controlled from JS:
-
- // sets both classes with `color` and `font-weight`
+```js
+ // sets both classes with `color` and `font-weight`
+```
## TODO