[akawry]

What about just importing the css file from your component file?

For example, in MyComponent.js, you have:

  import './MyComponent.css';
  
  const MyComponent = () => (
    <div className="my-class">I'm a component!</div>
  );

and in MyComponent.css,

  .my-class {
    color: red;
  }

To handle proper scoping, you could use something like css-modules or wrap each component in a top-level <div> with a component-specific class name. For example:

  const MyComponent = () => (
    <div className="MyComponent">
      <div className="content">
         I'm a component
      </div>
    </div>
  );

and then

  .MyComponent.content {
    color: red;
  }

If you use a preprocessor like sass, you can just nest your entire component-specific styles like this:

  .MyComponent
    .content
      color: red
    .footer
      color: blue

[MunGell]

I use this approach in most cases combining it with BEM class naming. However, the point of having single-file components it to have all the required code in one file, including CSS/styling.