react-style.tsx

import React from 'react';
import classNames from 'classnames';
import CSSModules from 'react-css-modules';
import styles from './Foo.module.scss';

export interface FooProps {
  className: string;
  prefixCls: string;
  type: 'default' | 'primary' | 'danger';
}

export interface FooState {}

class Foo extends React.Component<FooProps, FooState> {
  static defaultProps: Partial<FooProps> = {
    className: '',
    prefixCls: 'lv-foo',
    type: 'default'
  };

  constructor(props: FooProps) {
    super(props);
    this.state = {};
  }

  render() {
    const { className, prefixCls, type } = this.props;

    const classes = classNames(prefixCls, className, {
      [`${prefixCls}-${type}`]: type
    });

    return (
      <div styleName={classes}>
        <span styleName={`${prefixCls}-item`}>item1</span>
        <span styleName={`${prefixCls}-item`}>item2</span>
      </div>
    );
  }
}

export default CSSModules(Foo, styles, {
  allowMultiple: true
});


$prefixCls: 'lv-foo';

.#{$prefixCls} {
  width: 300px;
  height: 100px;
  background: #ddd;
  &-default {
    background: blue;
  }
  &-primary {
    background: green;
  }
  &-danger {
    background: pink;
  }
  &-item {
    color: orange;
  }
}