VuetifyのCSSは強い
基本的にいじらなくてもいい感じにきれいにできるという意味と、overrideしようとすると若干面倒くさいという二重の意味で強いVuetifyのCSSですが、変更したい場合があり思うところがあったので、こんなときにはこの方針でという備忘録
そのコンポーネントでしか使わない
scoped styleを使用して、あげれば事足りる。要素に対して直接Styleを付けなければここが最後に読み込まれるので、あるコンポーネントでしか使わないようなクラスがあればここに書いてあげればそれでいい
<style scoped lang="sass">
.wrap-text
word-break: break-all
white-space: normal
</style>
複数のVuetify標準コンポーネントに適応したい
この場合都度Scoped styleに持ってくるのは面倒なのでグローバルで呼べるようにする。しかしこの場合には、単純にクラスを追加するだけだとVuetifyの標準CSSの方が優先されることがあるので、確実にoverrideしたい場合には、キチンとネストして書くかdeepを使用するか、最終奥義 !importantを使用する。
components/_sample.sass
.wrap-text
word-break: break-all !important
white-space: normal !important
app.sass
@import './components/_sample'