File tree Expand file tree Collapse file tree 1 file changed +32
-35
lines changed
Expand file tree Collapse file tree 1 file changed +32
-35
lines changed Original file line number Diff line number Diff line change @@ -15,58 +15,56 @@ Inspired by the [SUIT CSS](https://suitcss.github.io/) methodology.
1515You write:
1616
1717``` javascript
18- /** @jsx React.DOM */
19-
20- var Profile = React .createClass ({
21- render : function () {
22- return (
23- < Style sheet= "
24- & .card {
25- cursor: pointer;
26- margin: 15px;
27- padding: 15px;
28- text-align: center;
29- height: 200px;
30- }
31- & img {
32- width: 130px;
33- height: 130px;
34- }
35- & p {
36- margin: 10px;
37- }
38- " >
39- < div className= " card" >
40- < img src= " mao.jpg" / >
41- < p> Mao< / p>
42- < / div>
43- < / Style>
44- );
45- }
46- });
18+ var Profile = React .createClass ({
19+ render : function () {
20+ return (
21+ < Style sheet= "
22+ & .card {
23+ cursor: pointer;
24+ margin: 15px;
25+ padding: 15px;
26+ text-align: center;
27+ height: 200px;
28+ }
29+ & img {
30+ width: 130px;
31+ height: 130px;
32+ }
33+ & p {
34+ margin: 10px;
35+ }
36+ " >
37+ < div className= " card" >
38+ < img src= " mao.jpg" / >
39+ < p> Mao< / p>
40+ < / div>
41+ < / Style>
42+ );
43+ }
44+ });
4745```
4846
4947You get namespaced CSS that works on sub-components (comparable to HTML5 ` <style scoped> ` ):
5048
5149``` html
52- <div class = " Style-4n412lnmi " >
50+ <div id = " InlineCss-1 " >
5351 <div class =" card" >
5452 <img src =" mao.jpg" >
5553 <p >Mao</p >
5654 </div >
5755 <style >
58- .Style-4n412lnmi .card {
56+ #InlineCss-1 .card {
5957 cursor : pointer ;
6058 margin : 15px ;
6159 padding : 15px ;
6260 text-align : center ;
6361 height : 200px ;
6462 }
65- .Style-4n412lnmi img {
63+ #InlineCss-1 img {
6664 width : 130px ;
6765 height : 130px ;
6866 }
69- .Style-4n412lnmi p {
67+ #InlineCss-1 p {
7068 margin : 10px ;
7169 }
7270 </style >
@@ -81,8 +79,7 @@ For a cascaded effect, see the `index.html` demo.
8179
8280## Usage
8381
84- Run ` npm run watch ` in your terminal and play with ` views/Main.jsx ` to get a feel of
85- the server-side rendering and client-side hot updates.
82+ Run ` npm run watch ` in your terminal and play with ` examples.jsx ` to get a feel of react-inline-css.
8683
8784## Community
8885
You can’t perform that action at this time.
0 commit comments