Vuetify: цвет не применяется к компоненту пользовательского интерфейса

В Vuetify я использовал компонент панели инструментов и установил его цвет на primary, поэтому предполагаемый отображается синим цветом, но я вижу его белым:

<v-toolbar dark color = "primary">
   <v-btn icon>
      <v-icon>more_vert</v-icon>
   </v-btn>
</v-toolbar>

Только когда я использую <v-toolbar dark>, я вижу, что панель инструментов становится черной (как и ожидалось), при использовании <v-toolbar blue> (или любого другого цвета) она становится белой.

Что может быть не так с моими настройками? Я использую тему Vuetify по умолчанию (Vue.use(Vuetify)).

Вы завернули его внутрь v-приложение?

Traxo 10.09.2018 10:14

Огромный поцелуй @Traxo Большое спасибо

Billal Begueradj 10.09.2018 10:58
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
2 598
1

Ответы 1

Возможно, это не ответ, но это может немного прояснить его. Чтобы стилизовать панель инструментов, вы можете установить тему так же, как вы уже сделали:

<v-toolbar dark>

dark также может быть light.

Чтобы изменить цвет, вам нужно указать его с помощью атрибута color:

<v-toolbar color = "blue">

То, что вы здесь пытались сделать, не сработает. Как сказано, тема может быть либо light, либо dark.

<v-toolbar blue>

Изменили ли вы каким-либо образом основной цвет на белый?

Vue.use(Vuetify, {
  theme: {
    "primary": "#1976D2",

По умолчанию основной в любом случае синий afaik, так что это не может быть правильно? Если я не пропустил недавнее обновление по этому поводу?

Traxo 10.09.2018 10:23

Я знаю, что основной по умолчанию синий, но именно поэтому мне было интересно, изменил ли его OP где-нибудь. Если OP не изменил основной цвет, есть другая проблема или ошибка. v-app, о котором вы упомянули, кажется весьма вероятной проблемой. Я также знаю, что Vuetify довольно часто использует стиль !importantgithub.com/vuetifyjs/vuetify/issues/3400, что также может привести к неожиданному поведению при перезаписи стилей.

SuperDJ 10.09.2018 10:30

Хорошие моменты, но установка цвета на панели инструментов - 101, с этим не должно быть никаких проблем, поэтому я на 99,9% уверен, что он не заключен в v-app, если только не были недавние изменения, о которых я не знаю. Посмотрим, когда они вернутся :) Тем не менее, я пометил его как дубликат, потому что проблема такая же, как и у связанного.

Traxo 10.09.2018 10:32

Фактически, я попробовал это, прежде чем спросить (извините, я забыл упомянуть об этом), но это не сработало. Спасибо за отзыв

Billal Begueradj 10.09.2018 10:56

Другие вопросы по теме