Skip to content

Commit 4d86472

Browse files
committed
Fix examples, add more links
1 parent 080cdd2 commit 4d86472

File tree

1 file changed

+11
-8
lines changed

1 file changed

+11
-8
lines changed

pages/docs/react/latest/styling.mdx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,25 @@ If they work in JS then they almost certainly work in ReScript. In the next few
1919

2020
This is the most basic form of styling, coming straight from the 90ies. You can apply a `style` attribute to any DOM element with our `ReactDOM.Style.make` API:
2121

22-
```rescript
23-
<div style=(
24-
ReactDOM.Style.make(~color="#444444", ~fontSize="68px", ())
25-
)/>
22+
```res
23+
<div style={ReactDOM.Style.make(~color="#444444", ~fontSize="68px", ())} />
2624
```
2725

28-
It's a labeled (therefore typed) function call that maps to the familiar style object `{color: '#444444', fontSize: '68px'}`. For every CSS attribute in the CSS specfication, there is a camelCased label in our `make` function.
26+
It's a [labeled](/docs/manual/latest/function#labeled-arguments) (therefore typed) function call that maps to the familiar style object `{color: '#444444', fontSize: '68px'}`. For every CSS attribute in the CSS specfication, there is a camelCased label in our `make` function.
2927

3028
**Note** that `make` returns an opaque `ReactDOM.Style.t` type that you can't read into. We also expose a `ReactDOM.Style.combine` that takes in two `style`s and combine them.
3129

3230
### Escape Hatch: `unsafeAddProp`
3331

3432
The above `Style.make` API will safely type check every style field! However, we might have missed some more esoteric fields. If that's the case, the type system will tell you that the field you're trying to add doesn't exist. To remediate this, we're exposing a `ReactDOM.Style.unsafeAddProp` to dangerously add a field to a style:
3533

36-
```reason
37-
let myStyle = ReactDOM.Style.make(~color="#444444", ~fontSize="68px", ());
34+
```res
35+
let style =
36+
ReactDOM.Style.make(
37+
~color="red",
38+
~padding="10px",
39+
(),
40+
)->ReactDOM.Style.unsafeAddProp("-webkit-animation-name", "moveit")
3841
```
3942

4043
## Global CSS
@@ -74,7 +77,7 @@ We now need to create a module binding that imports our styles as a JS object:
7477
let app = <div className={styles["root"]} />
7578
```
7679

77-
**Note:** `{..}` is an open JS object type, which means the type checker will not type check correct classname usage. If you want to enforce compiler errors, replace `{..}` with a concrete JS object type, such as `{"root": string}`.
80+
**Note:** `{..}` is an open [JS object type](/docs/manual/latest/object#type-declaration), which means the type checker will not type check correct classname usage. If you want to enforce compiler errors, replace `{..}` with a concrete JS object type, such as `{"root": string}`.
7881

7982

8083
## CSS Utility Libraries

0 commit comments

Comments
 (0)