Vue可以使用道具进行造型吗？ (SCSS/SASS)

Posted 2023-02-22

【中文标题】Vue可以使用道具进行造型吗？ (SCSS/SASS)

【英文标题】：Vue is it possible to use a prop for styling? (SCSS/ SASS)

【发布时间】：2020-09-08 03:20:03

【问题描述】：

我目前正在尝试允许对使用引导程序的组件进行自定义主题化。 我想在 Vue 组件部分的 SCSS 中设置它的 $primary 标记，例如目前我的样式如下所示：

<style scoped lang="scss">
$primary: #FF1493;
// Bootstrap and its default variables
@import "../../node_modules/bootstrap/scss/bootstrap";
// BootstrapVue and its default variables
@import "../../node_modules/bootstrap-vue/src/index.scss";

@import "src/assets/custom.scss";
</style>

所以我正在寻找一种方法，让该十六进制代码可以根据组件收到的道具进行定制。 感谢您的帮助。

在评论输入后进行编辑，尝试但没有成功：

<template>
 <div style="style=" '--test': #ff1493 "">
 </div>
</template>

<style scoped lang="scss">
$primary: var(--test);
// Bootstrap and its default variables
@import "../../node_modules/bootstrap/scss/bootstrap";
// BootstrapVue and its default variables
@import "../../node_modules/bootstrap-vue/src/index.scss";

@import "src/assets/custom.scss";
</style>

虽然在 SCSS 中导致以下编译错误：

SassError: argument `$color` of `darken($color, $amount)` must be a color
        on line 181 of node_modules/bootstrap/scss/_variables.scss, in function `darken`
        from line 181 of node_modules/bootstrap/scss/_variables.scss
        from line 9 of node_modules/bootstrap/scss/bootstrap.scss
        from line 201 of D:\Documents\Code\SiliconGit\src\components\SiDialog.vue

【问题讨论】：

在这里查看 Emad Ahmed 的答案***.com/questions/42872002/…

@Rooneyl 感谢您的提醒，在我用我发现的内容更新问题之前，我实际上已经尝试过该解决方案。

我试过了，对我来说效果很好，我已经发布了我使用的 mu 组件的副本。试试看，让我知道

【参考方案1】：

我尝试了Emad Ahmed 的答案，对我来说效果很好。 我的组件看起来像；

<template>
    <div id="a" :style="cssVars">
        <p>Hello there</p>
    </div>
</template>

<script>
    export default 
        name: "css-change",
        props: 
            init_color: 
                required: false,
                type: String,
                default: '#ff0000'
            
        ,
        data() 
            return 
                color: this.init_color
            
        ,
        computed: 
            cssVars () 
                return
                    /* variables you want to pass to css */
                    '--color': this.color,
                
            
        
    
</script>

<style lang="scss" scoped>
#a
    background-color: var(--color);

</style>

我正在从我的 package.json 导入引导程序； "bootstrap": "4.4.1"