Vue.jsのライブラリの色を変更したいです。

Question

Vue.jsのライブラリの色を変更したいです。

現在vue.jsとfirebaseを利用してポートフォリオを作成してます。

そこで利用しているのが、「vue-swal」と「vue-js-modal」になります。

そもそもライブラリの色を変更できるものなのか分かりかねますが、
cssで要素に対して色を変えてみましたが、リロードをしたら適用されなくなります。。

###vue-swal

白の背景を黒にして、文字色を白にしたいなと考えています。

###vue-js-modal

黒の背景にはできているのですがbodyの色とほとんど差がないで、shadowを付けたり
モーダルを開いたときのみbodyの背景を黒でなく、ダークグレーに変更したいと考えています。

分かる方いらっしゃいましたが、お力添えをいただきたいです。

よろしくお願いいたします。

Answer 1

基本的にコンポーネントのスタイル(style)は変更できるものが多いです。
まずはライブラリの公式ドキュメントを探してみましょう。

例えば、 vue-js-modal のドキュメントには styles に関する記載があります。
https://euvl.github.io/vue-js-modal/Properties.html#styles-string-array-object

Comments

[TMTN]

ご回答ありがとうございます。
公式ドキュメントを見る前に質問をしてしまいました。申し訳ございません。

しかし、モーダルウインドウについてはどのようにstyleを変えれるのかいまだに調べても分からないです。。

[mather]

Vueのコンポーネントのプロパティなのですから、JSのオブジェクトを指定する場合は次のように書くことになるでしょう。
<modal :styles="{'background-color': 'darkgray'}">...</modal>
回答に書いたURLのページには(stylesではないですが)プロパティの指定方法について例が書いてありますよ。