动态类未在浏览器顺风中呈现 - Vue

Question

我正在使用 Vue 创建一个简单的功能组件。我将变体作为道具传递给功能组件，以便该组件作为一个类拾取。 我的问题是该类已附加，但颜色未在浏览器中呈现。

<script>
export default {
  name: "MyComponent",

  functional: true,

  props: {
    variant: {
      type: String,
      required: true,
    },
  },

  render(createElement, { children, props, data }) {
    const attrs = {
      staticClass: `bg-${props.variant}`,
    };

    return createElement("div", attrs, children);
  },
};
</script>

下面是我如何调用组件

<MyComponent variant="success"> Hello there </MyComponent>

tailwind.config.js

在这里，我使用来自根 css 变量的颜色。

module.exports = {
    mode: 'jit',
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {
            colors: {
                primary: "var(--primary-color)",
                secondary: "var(--secondary-color)",
                warning: "var(--warning-color)",
                success: "var(--success-color)",
                danger: "var(--danger-color)",
                info: "var(--info-color)"
            },
       }
   }
}

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --primary-color: #1a73e8;
    --secondary-color: #f1f1f1;
    --success-color: #00b74a;
    --warning-color: #ffa900;
    --danger-color: #f93154;
    --info-color: #17a2b8;
    --circle-size: clamp(1.5rem, 5vw, 3rem);
    --spacing: clamp(0.25rem, 2vw, 0.5rem);
}

Answer 1

@JHeth 感谢您的评论

虽然有很多方法可以解决上述问题，但我还是想出了一个 CSS 解决方案，即在样式块中为生成的类添加样式。

 <script>
    export default {
      name: "MyComponent",
    
      functional: true,
    
      props: {
        variant: {
          type: String,
          required: true,
        },
      },
    
      render(createElement, { children, props, data }) {
        const attrs = {
          staticClass: `bg-demo-${props.variant}`,
        };
    
        return createElement("div", attrs, children);
      },
    };
</script>
<style>
 .bg-demo-success {
    background-color: var(--success-color);
 }
</style>