What is the best way to include styles in redistributables?

Question

React

Good day,
The other day I was going to publish several of my React components in Open Source on npm and then I asked myself the question - how best to arrange the connection of styles. There are several options, which one would be best for you?
First. Connect css to the source of my component.
Plus. In this case, the person who uses my component will only need to connect the component itself.
Minus. To change the styles to their custom ones, the person who downloaded my component will need to either change the source code or override my styles.
my component

import "../styles/open-source-component.css";
export default class OpenSourceComponent

connection
import OpenSourceComponent from "somelib";
Second. Do not include css in the component. And the person who will use it will have to connect the component and styles separately.
Plus. Some people only use webpack for js, and the styles are collected in a separate thread. Plus, people can not use my styles, but immediately connect their custom ones.
Minus. Inconvenient addition of styles from an open source component. You have to write the entire path to the styles entirely.
my component :
export default class OpenSourceComponent
connection:

import OpenSourceComponent  from "somelib";
import "../noe_modules/somelib/styles/open-source-component.css";

Which option do you like best? Or maybe there is an alternative?
I would appreciate your help in resolving this dilemma.

Answer 1

The first option is not bad, it is used, for example: datepicker , react-select libraries.
React-virtualized , for example, allows you to include styles using: import 'react-virtualized/styles.css'(and you don’t need to write the path from node_modules), I think if you figure out how they did it, this will be a solution for you)