Я использую Vuetify для некоторых компонентов. Я добавляю его в свой App.vue:
<template>
<v-app style="background: transparent !important;">
<nprogress-container></nprogress-container>
<v-content>
<v-container fluid>
<v-flex shrink>
<router-view></router-view>
</v-flex>
</v-container>
</v-content>
</v-app>
</template>
Мне это нужно только для небольших частей компонентов. Но это также нарушает мой стиль начальной загрузки. Он переписывает загрузчик .d-flex
со своим собственным .d-flex
с flex-grow: 1
.
И это нарушает стили моего приложения.
Один компонент с классами начальной загрузки:
<div v-if="lineType === 'main-line'"
@click="toggleHiddenBlock"
@mouseover="onMouseMove"
@mouseout="onMouseMove"
class="main-line m-0 d-flex flex-column flex-sm-row
justify-content-between justify-content-sm-start
align-items-center">
<div class="main-line__img flex-grow-0">
<img :src="imgSrc" alt="Fin Info" class="main-line__img-icon">
</div>
<div class="main-line__border-wrapper
d-flex flex-column flex-sm-row flex-grow-1
justify-content-between align-items-center">
<p class="main-line__text text-center text-sm-left">{{text}}</p>
<p class="main-line__money m-sm-0 ml-sm-auto flex-grow-0 text-center text-sm-right">
<span v-show="false" class="main-line__money-minus">–</span>
205 378<span class="main-line__money-cents">.00</span> $
</p>
</div>
</div>
Все элементы внутри компонента начинают сгибаться-растут, и это не то, чего я действительно хочу. Vuetify rewrite bootstrap .d-flex
своим собственным .d-flex
, потому что он использует !important
.
Как я могу решить эту проблему?
- Я пытался переписать его своим собственным
!important
, но это не помогло.
- Я пытаюсь использовать сжатие для v-flex, но это также не помогает.
В результате я получаю это:
http://i.shotnes.com/u/2778/0415/screenshot_17777.png