stylable-components.md

stylable-components

CSS for Components

Example

/* Counter.css */
@import Button from './Button.css';

div.root {
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 3px;
}

button.button {
  extends: Button;
}

.button:disabled {
  color: gray;
}

span.count {
  font-size: 2em;
}

// Counter.js
import React from 'react';
import styled from 'stylable-components';
import * as styles from './Counter.css';

const { Root, Control, Count } = styled(styles);

type Props = {
  count: number,
  min: number,
  max: number,
  onChange: number => mixed,
};

export default function Counter(props: Props) {
  let isMin = props.count <= props.min;
  let isMax = props.count >= props.max;

  return (
    <Root>
      <Control
        onClick={() => isMin || props.onChange(Math.max(props.count - 1, props.min))}
        disabled={isMin}>
        Decrement
      </Control>
      <Count>
        {props.count}
      </Count>
      <Control
        onClick={() => isMax || props.onChange(Math.min(props.count + 1, props.max))}
        disabled={isMax}>
        Increment
      </Control>
    </Root>
  );
}