mirror of
https://github.com/jbranchaud/til
synced 2026-01-03 15:18:01 +00:00
Add Inline Component Styles With React Reason as a reasonml til
This commit is contained in:
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
|
||||
For a steady stream of TILs from a variety of rocketeers, checkout
|
||||
[til.hashrocket.com](https://til.hashrocket.com/).
|
||||
|
||||
_618 TILs and counting..._
|
||||
_619 TILs and counting..._
|
||||
|
||||
---
|
||||
|
||||
@@ -444,6 +444,7 @@ _618 TILs and counting..._
|
||||
### ReasonML
|
||||
|
||||
- [Exhaustive Pattern Matching Of List Variants](reason/exhaustive-pattern-matching-of-list-variants.md)
|
||||
- [Inline Component Styles With React Reason](reason/inline-component-styles-with-react-reason.md)
|
||||
- [Multi-Argument Functions As Syntactic Sugar](reason/multi-argument-functions-as-syntactic-sugar.md)
|
||||
- [Pattern Match On Exceptions](reason/pattern-match-on-exceptions.md)
|
||||
- [Quickly Bootstrap A React App Using Reason](reason/quickly-bootstrap-a-react-app-using-reason.md)
|
||||
|
||||
29
reason/inline-component-styles-with-reason-react.md
Normal file
29
reason/inline-component-styles-with-reason-react.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# Inline Component Styles With Reason React
|
||||
|
||||
If you've written much React.js, the following may look familiar:
|
||||
|
||||
```javascript
|
||||
<span style={{
|
||||
width: "10px",
|
||||
height: "10px",
|
||||
backgroundColor: "rgb(200, 64, 128)"
|
||||
}} />
|
||||
```
|
||||
|
||||
This is how we do inline styles with JSX in JavaScript.
|
||||
|
||||
When it comes to doing inline styles with JSX in our ReasonML code, the best
|
||||
approach for now is to use a `make` function for styles provided by the
|
||||
React DOM bindings.
|
||||
|
||||
```reason
|
||||
<span style=(
|
||||
ReactDOMRe.Style.make(
|
||||
~width="10px",
|
||||
~height="10px",
|
||||
~backgroundColor="rgb(200, 64, 128)",
|
||||
())
|
||||
)/>
|
||||
```
|
||||
|
||||
[source](https://reasonml.github.io/reason-react/docs/en/style.html)
|
||||
Reference in New Issue
Block a user