如何自定义Vuetify？

Question

我正在使用Vuetify进行开发，但是我很难自定义组件。

对类background-color: red的

In this example I added rounded-card在两个地方应用了该类，但是它仅在v-card-media中起作用，而父组件仅应用了一个属性，即边界半径一并且未应用背景色。

为什么两种样式都不适用？我应该如何自定义组件样式？

<div id="app">
  <v-app id="inspire">
    <v-layout>
      <v-flex xs12 sm6 offset-sm3>
        <v-card flat class="rounded-card">
          <v-card-media
            class="white--text rounded-card"
            height="200px"
            src="https://vuetifyjs.com/static/doc-images/cards/docks.jpg"
          >
            <v-container fill-height fluid>
              <v-layout fill-height>
                <v-flex xs12 align-end flexbox>
                  <span class="headline">Top 10 Australian beaches</span>
                </v-flex>
              </v-layout>
            </v-container>
          </v-card-media>
          <v-card-title>
            <div>
              <span class="grey--text">Number 10</span><br>
              <span>Whitehaven Beach</span><br>
              <span>Whitsunday Island, Whitsunday Islands</span>
            </div>
          </v-card-title>
          <v-card-actions>
            <v-btn flat color="orange">Share</v-btn>
            <v-btn flat color="orange">Explore</v-btn>
          </v-card-actions>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

#app{
  padding-top:1em;
}

.rounded-card{
  border-radius:50px;
  background-color: red;
}

Answer 1

您可以使用SASS传递自定义变量。

请检查正式文件。 https://vuetifyjs.com/ja/customization/sass-variables

1。将特定的库添加到Vue CLI 3

（如果要导入材料设计字体库，也需要添加字体包=> "@mdi/font": "^3.9.97"）

$ npm install sass sass-loader deepmerge -D
// or
$ yarn add sass sass-loader deepmerge -D

// package.json
"devDependencies": {
  "@vue/cli-plugin-babel": "^3.9.0",
  "@vue/cli-plugin-eslint": "^3.9.0",
  "@vue/cli-service": "^3.9.0",
  "sass": "^1.18.0",
  "deepmerge": "^4.0.0",
  "sass-loader": "^7.1.0"
}

2。将自定义变量设置为SASS / SCSS文件。

// src/sass/main.scss

@import '~vuetify/src/styles/styles.sass';


$font-size-root: 16px;
$body-font-family: Arial, Meiryo, "Hiragino Sans", "Hiragino Kaku Gothic Pro", sans-serif;

$material-light: map-merge($material-light, (
  'background': white
));

@import '~@mdi/font/scss/materialdesignicons';

3。内部将自定义sass文件导入到Vue组件中

自定义sass文件必须添加在样式标签上方。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/sass/main.scss"`,
      },
    },
  },
  chainWebpack: config => {
    ["vue-modules", "vue", "normal-modules", "normal"].forEach((match) => {
      config.module.rule('scss').oneOf(match).use('sass-loader')
        .tap(opt => Object.assign(opt, { data: `@import '~@/sass/main.scss';` }))
    })
  }
}