CSS-in-JS example #5

styles.css

.base {
  color: #fff;

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

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

.warning {
  background-color: someValueReturnedByAFunction(),
}

TheComponent.js

import styles from './styles.css';

export const MyComponent = () => (
  <div className={`${styles.base} ${styles.warning}`}>
    Some content
  </div>
);