NgStyled

JSS integration with Angular

Features

• [x] Component decorator Styled
• [x] Theming with Theme
• [ ] Theme switching (dark/light mode)
• [x] Server Side Rendering with Angular Universal
• [ ] Critical CSS

Table of Contents

• Installation
• Usage

Installation

Using npm:

npm install @design4pro/ng-styled

or using yarn:

yarn add @design4pro/ng-styled

Usage

Inject the NgStyledModule module into your root module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgStyledModule } from '@design4pro/ng-styled';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgStyledModule.forRoot()],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Use class decorator Styled to add styles to your component:

import { Component } from '@angular/core';
import { Styled, StyledProp, Theme } from '@design4pro/ng-styled';

@Component({
  selector: 'ng-styled-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
@Styled(({ css, injectGlobal }) => {
  // global styles
  injectGlobal({
    '@global': {
      ':root': {
        '--background-color': (data: { backgroundColor: string }) =>
          data.backgroundColor,
      },
    },
  });

  // element styles
  return css(
    (theme: Theme) => ({
      root: {
        color: '#fff',
        backgroundColor: 'var(--background-color)',
        padding: '20px',
        direction: theme.direction,
      },
    }),
    { name: 'first' }
  );
})
export class AppComponent {
  classes: any; // required to use `[ngClass]="classes.root"` in html template

  @StyledProp() // mark property as styled property
  backgroundColor = 'red';

  click() {
    this.backgroundColor = this.backgroundColor === 'red' ? 'green' : 'red';
  }
}

<div [ngClass]="classes.root"></div>

Config options

import { create, Jss } from 'jss';
import extend from 'jss-plugin-extend';
import propsSort from 'jss-plugin-props-sort';
import { JssOptions } from '@design4pro/ng-styled';

const jss: Jss = create({
  // additional JSS plugins @see https://cssinjs.org/plugins?v=v10.9.0
  plugins: [extend(), propsSort()],
});

const jssOptions: JssOptions = {
  jss: jss,
  normalize: false, // disable normalizing (normalize.css)
};

const theme: Theme = {
  palette: {
    primary: {
      main: '#00bcd4', // use in decorator `theme.palette?.primary?.main`
    },
    secondary: {
      main: '#f50057',
    },
  },
};

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgStyledModule.forRoot(jssOptions, theme)],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

License

MIT © DESIGN4 ᴾ ᴿ ᴼ