非常に単純な質問です。おそらくこの問題に関連していると思いますが、Angular ではなく Vue での質問です。 Flickity カルーセルに適用しようとしている CSS スタイルは、Vue 3 アプリではレンダリングされません。 IDE ではスタイルがグレー表示されますが、ブラウザーで検査 (カルーセル セルの幅の変更など) によってスタイルを編集すると、正常に動作します。
CSS ファイルがブラウザーでレンダリングされるレイアウトの外観を正しく変更できるようにする特定の CSS インポートが欠落しているのでしょうか?
<テンプレート>テンプレート> <スタイルスコープ> .carousel-cell { 背景色: #248742; width: 300px; /* 全幅 */ height: 160px; /* カルーセルの高さ */ 右マージン: 10px; } /* カルーセル内にドットを配置します */ .flickity-page-dots { 下: 0px; } /* 白い丸 */ .flickity-page-dots .dot { 幅: 12px; 高さ: 12px; 不透明度: 1; 背景: 白; 境界線: 2 ピクセルの白一色。 } スタイル>フリッキー>
私の質問の理解が正しければ、親コンポーネント内の一部の
Flickity.vue
コンポーネントのスタイルをオーバーライドしたいということになります。スコープ付き CSS(つまり、
) では、スタイルは現在のコンポーネントにのみ適用され、その子コンポーネントには適用されません。スコープ付き CSS を引き続き使用したい場合は、次のように、セレクターの周囲で
:deep()
(Vue 2 の::v-deep
) を使用して動的子コンポーネントをターゲットにすることができます。
デモ 1Flickity.vue
コンポーネント自体は、.carousel-cell
のスコープ付きスタイルに対してより高い CSS 特異性を持っているため、親コンポーネントはその特異性を高める必要があります (例: # # を使用) #!重要###)。リーリー
あるいは、通常/非スコープの