使用scss更改默认Vuetify 3组件设置不工作?

Question

所以我一直在尝试遵循Vuetifys文档来更改文本字段的边框。

据我了解，文本字段的边界是由$text-field-border-radius决定的。我在我的src中创建了一个settings.scss文件:

@forward 'vuetify/settings' with (
$text-field-border-radius: 100px,
);

然后我将文件添加到我的vite.config.js:

vuetify({
autoImport: true,
styles: { configFile: 'src/settings.scss' }
}),

此外，我还添加了这个到我的logincomponent.vue(在文本字段驻留):

<template>
<v-text-field
v-model="email"
type="text"
placeholder="Your e-mail "
variant="outlined"
outlined
color="black"
style="color: #FFFFFF"
rounded
class="text-field-border-radius"
required
></v-text-field>
</template>
<style lang="scss">
@use '../settings.scss';
.text-field-border-radius {
$text-field-border-radius: settings.$text-field-border-radius;
}
</style>

不幸的是，我所做的一切都不能改变边界半径，在这一点上，我没有办法了。真的很感激一些帮助，提前感谢!

Answer 1

你必须像这样编辑/覆盖设置文件中的css。

@use 'vuetify/settings' with (
// $utilities: false,
$color-pack: false,
$heading-font-family: $head,
$body-font-family: $body
);

Answer 2

看起来像一个div类v-field__outline被渲染，其中包含三个div，构成了一个v-text-field在Vuetify 3的轮廓。

v-field__outline__start;v-field__outline__notch，和v-field__outline__end

为开始和结束添加边框半径为我解决了这个问题。

<style scoped>
:deep() .v-field__outline__start {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
:deep() .v-field__outline__end {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>