Vue自定义组件中使用CSS变量设置样式？

在Vue中，可以通过CSS-in-JS库如styled-components或emotion来使用CSS变量（CSS Custom Properties）。以下是一个使用styled-components的例子：

首先安装styled-components：

npm install styled-components

然后在Vue文件中使用：

// 引入 styled-components
import styled from 'styled-components';
 
// 创建一个带样式的组件
const StyledDiv = styled.div`
  --main-bg-color: ${props => props.theme.bgColor};
  --main-text-color: ${props => props.theme.textColor};
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
`;
 
// 设置主题
const theme = {
  bgColor: 'lightblue',
  textColor: 'white',
};
 
export default {
  data() {
    return {
      // 其他数据...
    };
  },
  // 在Vue组件中使用
  components: {
    StyledDiv
  }
}

在模板中使用：

<template>
  <StyledDiv>这是一个带有样式的div元素</StyledDiv>
</template>

在这个例子中，我们创建了一个StyledDiv组件，并通过props.theme设置了自定义的背景颜色和文本颜色。在模板中，直接使用StyledDiv就可以展现出相应的样式。