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:
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