Как лучше подключать стили в распространяемых компонентах?

Question

[Nick Nesterov]

Доброе время суток,

На днях собрался опубликовать на npm несколько своих React компонентов в Open Source и тут задался вопросом - как лучше всего оформить подключение стилей. Есть несколько вариантов, какой бы вам был удобнее всего?

Первый. Подключить css к исходнику моего компонента.
Плюс. В этом случае человеку, который заюзает моей компонент, нужно будет только подключить сам компонент.
Минус. Чтобы поменять стили на свои кастомные, человеку скачавшему мой компонент нужно будет, либо поменять исходник, либо перебить мои стили.

мой компонент

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

подключение
import OpenSourceComponent from "somelib";

Второй. Не подключать css в компонент. А человек, который будет его использовать должен будет подключить компонент и стили отдельно.
Плюс. Некоторые люди юзают webpack только для js, а стили собирают отдельным потоком. Плюс ко всему, люди могут не использовать мои стили, а сразу подключать свои кастомные.
Минус. Неудобное добавление стилей из open source компонента. Приходится прописывать весь путь к стилям целиком.

мой компонент :
export default class OpenSourceComponent

подключение:

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

Какой вариант вам нравится больше? Или может есть альтернатива?
Буду благодарен за помощь в решении этой дилеммы.

Answer 1

[Максим]

Первый вариант не плох, его используют, например: datepicker, react-select библиотеки.

React-virtualized, например, позволяет подключить стили с помощью: import 'react-virtualized/styles.css' (и при этом не нужно писать путь от node_modules), думаю если разобраться как они это сделали - для вас это будет решением)