UIライブラリコンポーネントを拡張性のある共通Vueコンポーネントにする

Bootstrap、VuetifyなどのUIライブラリを使用すると

高品質のUIコンポーネントを簡単に使用できます。

しかし、カスタマイズ方法に悩むことがよくあります。

通常、コンポーネント内部の要素にアクセスするために

:deep(.class-name)のようにアクセスしますが、

問題は、一つの画面で同じコンポーネントをそれぞれ異なる方法でカスタマイズする必要がある場合や、

別の画面で同じスタイルを適用する必要がある場合です。

例えば、

buefyのtooltipコンポーネントの背景色を変更したい場合は、以下のように使用できます。

しかし、あるコンポーネントを黒に、別のコンポーネントをオレンジ色に変更したい場合はどうでしょうか？

その都度クラスを新しく適用します。(CSSオーバーライド)

別の画面でも黒色のツールチップを使用したい場合は？

スタイルをコピー＆ペーストします。(またはモジュールを使用します。)

上記の課題を解決するために、拡張性の高いコンポーネントを以下のように構成しました。

上記のように構成します。

これで、親コンポーネントでcustom-tooltip.vueを使用できます。

上記の方法以外にも、様々な解決策があります。

- カスタムディレクティブを作成して拡張する方法

- $variablesを利用してテーマを拡張する方法

多くの部分を省略しましたが、スタイルだけでなく、様々なロジックやAPIが含まれる場合、

このようにコンポーネントでラップする方が適切な場合もあると考えます。

• 他に良いアイデアがあれば教えていただけると幸いです。