CSS-in-JS example #3

MyComponent.js

import { css } from 'some-css-in-js-project';
	
const styles = css`
  .base: {
    color: #fff;

    &:hover {
      background-color: #0074d9;
    }
  }

  .primary: {
    background-color: #0074D9;
  }

  .warning: {
    background-color: ${someValueReturnedByAFunction()},
  }
`;
	
export const MyComponent = () => (
  <div className={`${styles.base} ${styles.warning}`}>
    Some content
  </div>
);