swiss-react

A simple CSS-in-js solution made for a Typescript world 💙

Separating components from styles again 🎂

Installation

npm i swiss-react

Demo

I've made a Codesandbox to play around with

• Codesandbox

Simple Example

First create a stylesheet

// App.styles.ts
import { createStyles } from 'swiss-react';

export default createStyles('App', () => ({
  Wrapper: {
    display: 'flex'
  }
}));

Then use it in your component

import React from 'react';
import AppStyles from './App.styles.ts';
import { useClassNames } from 'swiss-react';

function App() {
  const c = useClassNames(styles);

  return <div className={c.Wrapper()}>Hi</div>;
}

Advanced Example

// App.styles.ts
import { createStyles, condition } from 'swiss-react';

export default createStyles('App', () => ({
  Wrapper: {
    display: 'flex'
  }
}));

Then use it in your component

import React from 'react';
import AppStyles from './App.styles.ts';
import { useClassNames } from 'swiss-react';

function App() {
  const c = useClassNames(styles);

  return <div className={c.Wrapper()}>Hi</div>;
}