https://github.com/salamaashoush/ngx-styled

Simple Decorator to integrate emotion with angular components
https://github.com/salamaashoush/ngx-styled

angular angular-components cssinjs decorator emotion jss style styled-components

Last synced: about 1 month ago
JSON representation

Simple Decorator to integrate emotion with angular components

• Host: GitHub
• URL: https://github.com/salamaashoush/ngx-styled
• Owner: salamaashoush
• Created: 2019-08-14T01:04:04.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-06-02T23:20:45.000Z (over 2 years ago)
• Last Synced: 2024-09-28T17:23:24.721Z (about 2 months ago)
• Topics: angular, angular-components, cssinjs, decorator, emotion, jss, style, styled-components
• Language: TypeScript
• Size: 475 KB
• Stars: 5
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# NgxStyled

[![npm version](https://badge.fury.io/js/ngx-styled.svg)](https://badge.fury.io/js/ngx-styled)

This is a simple  decorator to integrate [emotion](https://emotion.sh/docs/emotion) with angular components

```typescript

import { Styled } from 'ngx-styled';

import { Component } from '@angular/core'

@Component({

  template: '
Change Color
',

})

@Styled(({ component, css, injectGlobal }) => {

  // tslint:disable-next-line: no-unused-expression

  injectGlobal`

      body {

        background: ${component.color};

        width: 100vw;

        height: 100vh;

        display: flex;

        align-items: center;

        justify-content: center;

      }

  `;

  return css({

    '& button': {

      padding: 10,

      border: 'none',

      color: 'white',

      background: '#2c3e50'

    }

  });

})

class SimpleComponent {

  classes: string; // managed by ngx-styled

  color = 'green';


  changeColor(){

    // styles will be updated with component changes

    this.color = 'red';

  }

}

```