子コンポーネントや、v-htmlで生成された要素にもスタイルを適用する方法[Vue.js]

子コンポーネントや、v-htmlで生成された要素にもスタイルを適用する方法[Vue.js]
Vue.jsを使用している案件では、ほとんどの場合
単一コンポーネントを使用していて、css の部分は、ほぼ次のように書かれていると思います。

[Vue.jsの単一コンポーネントを使った案件で想定される一般的な style の状態]

<style scoped>
.myclass {
  font-size: 3rem;
}
</style>

↑そうです。1行目にあるように、 scoped です。
この scoped 属性がstyleタグについている場合、Vue.jsの単一コンポーネントでは、
「そのコンポーネントにのみ」スタイルを適用することができます。

ただ、案件の中には
「案件全体のルールとしては、cssはscopedで運用」されているものの
ある一定の導線においてのみ
「子コンポーネントにもスタイルを適用したい」、
そういったケースが出てくる場合があります。

今回はそんな時に使える方法について、書いた記事になります。
それでは早速次のページより、その方法について見ていきたいと思います。

この記事をシェアする:

この記事:子コンポーネントや、v-htmlで生成された要素にもスタイルを適用する方法[Vue.js] を書いた人

tedate.jp を運営しています。都内在住。 Webデザイナー/グラフィックデザイナーになって、通算15年程になります。 皆さまがWeb制作をもっと楽しめるような、良い情報を発信できるように。日々記事を書いています。 Webデザイナーとしての修行時代(受託のWebデザイナー時代)のエピソードを含む、私の「人となり」がある程度わかる記事はこちらにございます。