https://github.com/bloodyowl/react-styled
styled component for react & style-loader/usable
https://github.com/bloodyowl/react-styled
Last synced: 5 months ago
JSON representation
styled component for react & style-loader/usable
- Host: GitHub
- URL: https://github.com/bloodyowl/react-styled
- Owner: bloodyowl
- License: mit
- Created: 2015-03-23T11:04:18.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-05-30T11:56:31.000Z (over 9 years ago)
- Last Synced: 2025-05-31T04:09:18.918Z (6 months ago)
- Language: JavaScript
- Size: 183 KB
- Stars: 39
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-css - React-styled
- awesome-css - React-styled
README
# react-styled
> ES7 decorator for dynamic stylesheet usage w/ webpack
[](https://travis-ci.org/bloodyowl/react-styled)
## install
```console
$ npm install bloody-react-styled --save-dev
```
## require
```javascript
import styled from "bloody-react-styled"
```
## API
### @styled(styles) class
styled is a ES7 decorator that applies useable style only if at least one
instance of the component it is attached to is in mounted,
and removes it when there are no more instances.
## how to
first, install `style-loader`, `css-loader` and possibility the loader
of your choice for a pre/post-processor.
```console
$ npm install --save-dev style-loader css-loader
```
to configure webpack for that, use in your webpack.config.js :
```javascript
const config = {
// ...
module : {
loaders : [
// ...
{
test : /\.css$/,
loaders: [
// use the useable to only use the stylesheet when necessary
"style/useable",
"css",
// example of css processor you might want to use
"cssnext",
],
},
],
},
// ...
}
```
then you can do
```javascript
import React, {Component} from "react"
import styled from "bloody-react-styled"
import styles from "./styles.css"
@styled(styles)
class MyComponent extends Component {
render() {
return (
will be styled!
)
}
}
export default MyComponent
```
## local stylesheets with css-loader
### css
```css
:local .default {
padding: 1rem;
}
```
### js
```javascript
import React, {Component} from "react"
import styled from "bloody-react-styled"
import styles from "./styles.css"
@styled(styles)
class MyComponent extends Component {
render() {
const {locals} = styles
return (
will be styled!
)
}
}
export default MyComponent
```
## [license](LICENSE)