Popular posts

React components are already single file. Here's your example as a valid component:

import React from 'react'

const styles = {
  container: {
    padding: 30,
    background: 'blue',
  },
}

const ComponentName = () => (
  <div style={styles.container} />
)

export default ComponentName

This is without any libraries. If you're looking to use a scoped <style> tag, then check out styled-jsx.

Personally though, my favorite CSS-in-JS solution is styled-components. Instead of mapping the styles of an element with classes, you create actual styled components. Imagine just writing <Button primary> instead of <button className="button button--primary">. The end result you can achieve with other solutions of course, but it's about the authoring of components that makes it appealing.