无法覆盖 vuetify 中的样式

问题描述

如何覆盖 vuetify 中的实际类?

how can I overwrite actual classes in vuetify?

我创建了一个 ./src/stylus/main.styl 文件，我在其中覆盖了一些当前的 vuetify 设置作为测试:

I have created a ./src/stylus/main.styl file where I override some of the current vuetify settings as a test:

@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 和 chunk-vendor.xxx.css 文件.

For some reason the above values only work partially. The new values assigned to $material-dark.background and $body-font-family work fine for anything under the theme--dark however when it comes to .display-2 these values are still calling the original settings for both font-size and font-family and override the ones I added to main.styl. I even tried going inside the component which contains the .display-2 first in stylus as scoped language which did not work then in plain css which does not throw an error but gets ovewriten by Vuetify's original default generated in the app.xxx.css and chunk-vendor.xxx.css files.

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

</style>

这有什么原因吗?

推荐答案

一些变量需要在导入 _variables.styl 之前设置，因为它们用于设置该文件中的其他变量.这是有效的，因为 Vuetify 在手写笔文件中使用条件赋值 (:=).

Some variables need to be set BEFORE importing _variables.styl because they are used to set other variables in that file. This works because Vuetify is using conditional assignment (:=) in the stylus files.

最安全的方法是在导入任何其他文件之前设置所有顶级变量.

The safest way is to set all top-level variables before importing any other files.

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

然后，导入 _variables.styl 以便您可以覆盖嵌套值:

Then, import _variables.styl so that you can override the nested values:

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

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

然后，导入 main.styl 以便创建 Vuetify CSS 类:

Then, import the main.styl so that the Vuetify CSS classes are created:

// 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 在内部引用这些变量.

Vuetify is using conditional assignment operators in the stylus files. So if you set the variable before the @import, it will persist after the @import. This is important because _variables.styl references those variables internally.

特别是在这种情况下，$heading-font-family := $body-font-family.然后使用 $heading-font-family 的值设置 $headings 哈希.这意味着在您设置 $body-font-family 时，$heading-font-family 已经设置为默认值.

Specifically in this case, $heading-font-family := $body-font-family. Then the $headings hash is set using the value of $heading-font-family. This means that by the time you were setting $body-font-family, $heading-font-family was already set to the default value.

.display-2 样式的覆盖不起作用，因为它还不存在.因此，当您导入 main.styl 时，它被设置回默认值.

The override of .display-2 styles wasn't working because it didn't exist yet. So when you imported main.styl, it was getting set back to the default values.

你可以把它分成几个文件来清理一下:

You can clean it up a little by breaking it into several files:

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`

这篇关于无法覆盖 vuetify 中的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！