React Inline CSS
Make your React components visually predictable. React Inline CSS allows you to write traditional CSS stylesheets in your components, automatically namespacing them for you.
Inspired by the SUIT CSS methodology.
Demo
Example
You write:
var Profile = React.createClass({
render: function () {
return (
& .card {
cursor: pointer;
margin: 15px;
padding: 15px;
text-align: center;
height: 200px;
}
& img {
width: 130px;
height: 130px;
}
& p {
margin: 10px;
}
`}>
Mao
);
}
});
You get namespaced CSS that works on sub-components (comparable to HTML5
Mao
#InlineCss-1 .card {
cursor: pointer;
margin: 15px;
padding: 15px;
text-align: center;
height: 200px;
}
#InlineCss-1 img {
width: 130px;
height: 130px;
}
#InlineCss-1 p {
margin: 10px;
}