Inline CSS in your React components, namespaced automatically.
npm install react-inline-cssMake 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.
You write:
`` Maojavascript`
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;
}
}>

);
}
});
You get namespaced CSS that works on sub-components (comparable to HTML5
For a cascaded effect, see the
index.html demo.Installation
npm install --save react-inline-css react
Usage
Run
npm run watch in your terminal and play with example/ to get a feel of react-inline-css.$3
You can override the
& as the selector to the current component. This is useful if you want to require precompiled stylesheets from an external file. Here's an example with SASS loader for Webpack:UserComponent.js
`javascript
import React from "react";
import InlineCss from "react-inline-css";
const stylesheet = require("!raw!sass!./UserComponent.scss");class UserComponent extends React.Component {
render () {
return (
Mao is no longer red!
Mao is no longer red!
Mao is no longer red!
);
}
};
`UserComponent.scss
`scss
UserComponent {
color: red;
.facebook {
color: blue;
}
.google {
color: blue;
}
.twitter {
color: green;
}
}
``result
Let's start one together! After you ★Star this project, follow me @Rygu
on Twitter.
BSD 3-Clause license. Copyright © 2015, Rick Wong. All rights reserved.