Skip to content

Commit 78de875

Browse files
committed
Updated README.
1 parent 250e129 commit 78de875

File tree

1 file changed

+68
-2
lines changed

1 file changed

+68
-2
lines changed

README.md

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,70 @@
1-
ReactStyle
1+
React Style component (PoC)
22
==========
33

4-
React Style component
4+
Make your React components visually predictable. React Style components allows you to cascade CSS stylesheets on your components, automatically namespacing them.
5+
6+
## Example:
7+
8+
You write:
9+
10+
```javascript
11+
/** @jsx React.DOM */
12+
13+
/*
14+
* Smallest component in this example, has a default style.
15+
*/
16+
var Profile = React.createClass({
17+
render: function () {
18+
return (
19+
<Style sheet="
20+
.card {
21+
cursor: pointer;
22+
margin: 15px;
23+
padding: 15px;
24+
text-align: center;
25+
height: 200px;
26+
}
27+
img {
28+
width: 130px;
29+
height: 130px;
30+
}
31+
p {
32+
margin: 10px;
33+
}
34+
">
35+
<div className="card">
36+
<img src="mao.jpg" />
37+
<p>Mao</p>
38+
</div>
39+
</Style>
40+
);
41+
}
42+
});
43+
```
44+
45+
You get:
46+
47+
```html
48+
<div class="Style-4n412lnmi">
49+
<div class="card">
50+
<img src="mao.jpg">
51+
<p>Mao</p>
52+
</div>
53+
<style>
54+
.Style-4n412lnmi .card {
55+
cursor: pointer;
56+
margin: 15px;
57+
padding: 15px;
58+
text-align: center;
59+
height: 200px;
60+
}
61+
.Style-4n412lnmi img {
62+
width: 130px;
63+
height: 130px;
64+
}
65+
.Style-4n412lnmi p {
66+
margin: 10px;
67+
}
68+
</style>
69+
</div>
70+
```

0 commit comments

Comments
 (0)