Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/RickWong/react-inline-css
🌳 Write CSS inside your React components!
https://github.com/RickWong/react-inline-css
Last synced: about 2 months ago
JSON representation
🌳 Write CSS inside your React components!
- Host: GitHub
- URL: https://github.com/RickWong/react-inline-css
- Owner: RickWong
- License: bsd-3-clause
- Created: 2014-05-17T20:45:35.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2020-05-01T04:19:43.000Z (over 4 years ago)
- Last Synced: 2024-09-19T03:49:47.065Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 4.96 MB
- Stars: 169
- Watchers: 9
- Forks: 19
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-react-components-all - react-inline-css - Write CSS inside your React components!. (Uncategorized / Uncategorized)
- awesome-list - react-inline-css - Write CSS inside your React components!. (Code Design / CSS / Style)
README
# 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](https://suitcss.github.io/) methodology.
## Demo
[Mao-mao-mao!](https://edealer.nl/mao)
## Example
You write:
```javascript
var Profile = React.createClass({
render: function () {
return (
Mao
);
}
});
```
You get namespaced CSS that works on sub-components (comparable to HTML5 ``):
```html
<div id="InlineCss-1">
<div class="card">
<img src="mao.jpg">
<p>Mao</p>
</div>
<style>
#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;
}
```
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.
### SASS / LESS
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](https://www.npmjs.com/package/sass-loader):
**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**
## Community
Let's start one together! After you ★Star this project, follow me [@Rygu](https://twitter.com/rygu)
on Twitter.
### Contributors
- [Danilo Moret](https://github.com/moret)
- [Will Butler](https://github.com/willbutler)
## License
BSD 3-Clause license. Copyright © 2015, Rick Wong. All rights reserved.