Element-Plusコンポーネント内部のスタイルを変更したかった

Element-Plusを使用しているけど、コンポーネントのスタイルをプロダクトデザインに合わせて変更したい、、
そんな時に自分が試した方法を共有したいと思います。

※記事内のコードはSCSSで記述されていますので、ご了承ください

実装手順

結論から言いますと、Vueの機能であるDeep Selectorを使用すれば実現可能です！
まず、chromeのdevTool等を使用して、Element-Plusのコンポーネントで実際に生成されるHtmlを確認してみまししょう。
または、直接ソースを見られても良いと思います。
対象のタグに当たっているクラス名を発見できましたでしょうか？

こんな具合です。
ちなみに、Element-Plusのコンポーネントのclassは、elなんちゃかのことがほとんどです(全てを確認したわけではないので、間違えていたら申し訳ありません、、)

それでは実際に、el-tabs__itemというクラスを指定して、スタイルを当てていきたいと思います。
Element-Plusのコンポーネントを呼び出しているコンポーネントに、以下のようなSCSSを記述します

:deepを使用する方法(2023年11月現在、v-deepは非推奨になっているようです。)

:deep(.el-tabs__item) {
  width: 100%;
}

こんな感じでまとめて複数指定することも可能です。

:deep {
    .el-tabs__header {
      margin-top: 0;
    }
    .el-tabs__item {
      background-color: #fff;
    }
  }

思い通りのスタイルになりましたか？

まとめ

当たり前のことですが、Element-PlusのコンポーネントもVue.jsで記述されているので通常のコンポーネントと同じようにDeep Selectorが使用できます。
ですので、Vueのドキュメントに沿って扱えばある程度のカスタムが可能です。

コンポーネントライブラリに苦手意識を持っている方も多いかと思いますが、こんなこともできるんだよということで、開発の一助になれば幸いです。

もし間違っている点等ありましたら、ご指摘いただければ非常にうれしく思います！