Невозможно переопределить стили в vuetify - PullRequest
Новая
       56

Невозможно переопределить стили в vuetify

0 голосов
/ 07 декабря 2018

как я могу переписать реальные классы в vuetify?

Я создал файл ./src/stylus/main.styl, в котором я перезаписываю некоторые текущие настройки vuetify в качестве теста: 

@import '~vuetify/src/stylus/settings/_variables'
@import '~vuetify/src/stylus/elements/_typography'





$material-dark.background = green
$body-font-family = Arial
$alert-font-size = 18px

.display-2
  font-size: $headings.h6.size !important
  font-family: $headings.h3.font-family !important


@import '~vuetify/src/stylus/main'

По некоторым причинам вышеуказанные значения работают толькочастично.Новые значения, присвоенные $material-dark.background и $body-font-family, отлично работают для всего, что под theme--dark, однако, когда дело доходит до .display-2, эти значения по-прежнему вызывают исходные настройки для font-size и font-family и переопределяют их.Я добавил в main.styl.Я даже пытался зайти внутрь компонента, который содержит .display-2 сначала в стилусе в качестве языка с областью действия, который не работал, а затем в простом CSS, который не выдает ошибку, но переписывается по умолчанию по умолчанию Vuetify, сгенерированному в app.xxx.css и чанке-vendor.xxx.css файлы. 

//component
<style scoped>
h1.display-2{
  font-size:20px;
  font-family: "Times New Roman";
  color:green;
}

</style>

Есть ли причина для этого?

Ответы [ 2 ]

0 голосов
/ 10 апреля 2019

У меня та же проблема, что и у вас, и способ ее решения заключается в удалении атрибута scoped из тега <style>.

Надеюсь, это поможет.

0 голосов
/ 09 декабря 2018

Некоторые переменные должны быть установлены ДО импорта _variables.styl, потому что они используются для установки других переменных в этом файле.Это работает, потому что Vuetify использует условное присвоение (:=) в файлах стилуса.

Самый безопасный способ - установить все переменные верхнего уровня перед импортом любых других файлов. 

// set these variables before Vuetify does
$body-font-family = Arial
$alert-font-size = 18px

Затем импортируйте _variables.styl, чтобы можно было переопределить вложенные значения: 

@import '~vuetify/src/stylus/settings/_variables'

// now that the $material-dark hash exists, set the background
$material-dark.background = 'green'

Затем импортируйте main.styl, чтобы создать классы Vuetify CSS: 

// import main to set all styles
@import '~vuetify/src/stylus/main'

// override the CSS classes using stylus variables
.display-2
  font-size: $headings.h6.size !important
  font-family: $headings.h3.font-family !important

Vuetifyиспользует операторы условного присваивания в файлах стилуса.Поэтому, если вы установите переменную до @import, она сохранится после @import.Это важно, потому что _variables.styl ссылается на эти переменные внутри.

В данном случае, в частности, $heading-font-family := $body-font-family.Затем хэш $headings устанавливается с использованием значения $heading-font-family.Это означает, что к тому времени, когда вы устанавливали $body-font-family, $heading-font-family уже было установлено в значение по умолчанию.

Переопределение стилей .display-2 не работало, потому что оно еще не существовало.Поэтому, когда вы импортировали main.styl, он возвращался к значениям по умолчанию.

Вы можете немного почистить его, разбив его на несколько файлов:

src / assets / stylus / variables.styl 

// set all top-level variables
$body-font-family = Arial
$alert-font-size = 18px

src / assets / stylus / theme.styl 

// set all nested variables
$material-dark.background = 'green'

src /assets / stylus / app.styl 

// override CSS styles
.display-2
  font-size: $headings.h6.size !important
  font-family: $headings.h3.font-family !important

src / assets / stylus / main.styl 

// pull it all together
@import 'variables'
@import '~vuetify/src/stylus/settings/_variables'
@import 'theme'
@import '~vuetify/src/stylus/main'
@import 'app`
...