CSS スタイルが Flickity に正常に適用されませんでした

Question

非常に単純な質問です。おそらくこの問題に関連していると思いますが、Angular ではなく Vue での質問です。 Flickity カルーセルに適用しようとしている CSS スタイルは、Vue 3 アプリではレンダリングされません。 IDE ではスタイルがグレー表示されますが、ブラウザーで検査 (カルーセル セルの幅の変更など) によってスタイルを編集すると、正常に動作します。

CSS ファイルがブラウザーでレンダリングされるレイアウトの外観を正しく変更できるようにする特定の CSS インポートが欠落しているのでしょうか?

<テンプレート>
    <div class="col d-block m-auto">
       <flickity ref="flickity" :options="flickityOptions">
       </フリッキー>
    </div>
</テンプレート>

<スタイルスコープ>
    .carousel-cell {
      背景色: #248742;
      width: 300px; /* 全幅 */
      height: 160px; /* カルーセルの高さ */
      右マージン: 10px;
    }
    
      /* カルーセル内にドットを配置します */
    .flickity-page-dots {
      下: 0px;
    }
    /* 白い丸 */
    .flickity-page-dots .dot {
      幅: 12px;
      高さ: 12px;
      不透明度: 1;
      背景: 白;
      境界線: 2 ピクセルの白一色。
    }
</スタイル>

Answer 1

私の質問の理解が正しければ、親コンポーネント内の一部の Flickity.vue コンポーネントのスタイルをオーバーライドしたいということになります。

スコープ付き CSS (つまり、<style スコープ付き>) では、スタイルは現在のコンポーネントにのみ適用され、その子コンポーネントには適用されません。スコープ付き CSS を引き続き使用したい場合は、次のように、セレクターの周囲で :deep() (Vue 2 の ::v-deep) を使用して動的子コンポーネントをターゲットにすることができます。

Flickity.vue コンポーネント自体は、.carousel-cell のスコープ付きスタイルに対してより高い CSS 特異性を持っているため、親コンポーネントはその特異性を高める必要があります (例: # # を使用) ＃！重要＃＃＃）。 リーリー

デモ 1

あるいは、通常/非スコープの

<style>

ブロックを使用することもできます。 scoped 属性を削除するだけです。

デモ 2