React SASS Composable Style

How to use SCSS Mixins to do composable style with React

by Steve Martin

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

SCSS

@mixin spinnerContainer() {
  &__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

@mixin spinnerImg() {
  &__img {
    width: 30px;
    height: 30px;
  }
}

@mixin spinnerMessage() {
  &__message {
    color: green;
  }
}

@mixin spinner() {
  &--spinner {
    @include spinnerContainer();
    @include spinnerImg();
    @include spinnerMessage();
  }
}

.page {
  h1 {
    color: red;
  }

  @include spinner();
}

Babel + JSX

class LoadingSpinner extends React.Component {
	render() {
  	const { rootClass } = this.props;
    
    return (
      <div className={ `${rootClass}--spinner__container` }>
        <img src="https://i.stack.imgur.com/I4RPc.gif" className={ `${rootClass}--spinner__img` }/>
        <p className={ `${rootClass}--spinner__message` }>Loading ...</p>
      </div>
		)
   }
}

class Page extends React.Component {
  render() {
  	const baseClass = "page";
    return <div className={ baseClass }>
    <h1>Hello {this.props.name}</h1>
      <LoadingSpinner rootClass={ baseClass } />
    </div>;
  }
}

ReactDOM.render(
  <Page name="World" />,
  document.getElementById('container')
);