https://github.com/doxiaodong/react-scoped

https://github.com/doxiaodong/react-scoped

css less react react-scoped scoped scss shadow style stylus

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/doxiaodong/react-scoped
• Owner: doxiaodong
• Created: 2017-09-26T08:38:07.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-21T06:17:54.000Z (about 7 years ago)
• Last Synced: 2024-02-22T23:03:06.271Z (11 months ago)
• Topics: css, less, react, react-scoped, scoped, scss, shadow, style, stylus
• Language: TypeScript
• Homepage: https://doxiaodong.github.io/react-scoped/
• Size: 374 KB
• Stars: 3
• Watchers: 2
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## ReactScoped

Inspired by angular style scoped

## Usage

npm i react-scoped

```

import { ReactScoped, ViewEncapsulation } from 'react-scoped'

const styles = `

  .test {

    color: red;

  }

  .home {

    font-size: 20px;

  }

`

export default class App extends Component {

  render() {

    return (

      

        


          
Home

          

        

      

    )

  }

}

```


## Less

* Webpack: raw-loader!less-loader

* Component

```

import { ReactScoped, ViewEncapsulation } from 'react-scoped'

import styles from './style.less'

export default class App extends Component {

  render() {

    return (

      

        


          
Home

          

        

      

    )

  }

}

```


## ReactScoped

```

props: {

  styles?: string[]

  encapsulation?: ViewEncapsulation

}

defaultProps: {

  styles: [],

  encapsulation: ViewEncapsulation.Emulated

}

```

## ViewEncapsulation

* As angular ViewEncapsulation (https://angular.io/api/core/ViewEncapsulation)