Button.elo.css

.Button {
  background-color: rgb(90, 180, 90);
  font-size: 15px;
  border-radius: 15px
}

.Button:hover {
  background-color: rgba(67, 148, 67, .7)
}

Button.elo.js

import './Button.blu.css'

export default function Button() {
  return {
    _className: 'Button'
}

Header.elo.css

.Header {
  padding-left: 20px;
  padding-right: 20px;
  line-height: 1.5
}

@media (min-width: 320px) {
  .Header {
    padding-left: 30px;
    padding-right: 30px
  }
}

Header.elo.js

import './Header.blu.css'

export default function Header({ size, color }) {
  return {
    _className: 'Header',
    fontSize: size,
    color,
    '@media (min-width: 320px)': {
      fontSize: size * 2
    }
  }
}

style.elo

style Header {
  paddingLeft: 20
  paddingRight: 20
  lineHeight: 1.5
  fontSize: $size
  color: $color
  [@viewportWidth>=320] {
    fontSize: Math.multiply($size 2)
    paddingLeft: 30
    paddingRight: 30
  }
}

style Button {
  backgroundColor: rgb(90 180 90)
  fontSize: 15
  borderRadius: 10
  
  [@hover] {
    backgroundColor: Color.alpha(Color.darken(rgb(90 180 90) 20) 70)
  }
}

style.elo.js

import Header from './Header.blu.js' 
import Button from './Button.blu.js'

export {
  Header,
  Button
}

Usage.js

import React from 'react'
import { useFela } from 'react-fela'

import { Header, Button } from './style.elo.js'

export default (props) => {
  const css = useFela(props)
  
  return (
    <div>
      <h1 className={css(Header)}>Hello World</h1>
      <button className={css(Button)}>Click Me</button>
    </div>
  )
}