CSS-in-JS 是一种将 CSS 样式与 JavaScript 代码结合的方法，使得样式可以直接嵌入到组件中，从而实现更好的样式封装和动态计算样式。本篇学习笔记将介绍如何在 Vue 中使用 CSS-in-JS，以及 vue-styled-components 库的用法。

什么是 CSS-in-JS？

CSS-in-JS 是一种将样式与组件关联的方法。它允许你将 CSS 样式编写在 JavaScript 代码中，使样式与组件逻辑更紧密地结合在一起。CSS-in-JS 可以实现以下优势：

• 样式封装：将样式与组件关联，避免全局样式的污染。
• 动态样式：使用 JavaScript 动态计算样式，根据组件的属性、状态或其他因素更改样式。
• 主题切换：轻松实现主题切换，通过共享主题对象改变整个应用的外观。

vue-styled-components

vue-styled-components 是一个将 styled-components 的概念引入 Vue 的库。它允许你在 Vue 组件中使用 CSS-in-JS，将样式与组件逻辑紧密关联。

安装

使用 npm 安装 vue-styled-components：

npm install vue-styled-components

使用方法

1、 在 Vue 组件中引入 vue-styled-components：

import styled from "vue-styled-components";

2、 使用 styled 函数创建一个样式化的组件。传递一个 HTML 元素名称（如 div、button 等）作为参数，并使用模板字符串定义样式：

const StyledDiv = styled.div`
  background-color: #f5f5f5;
  padding: 16px;
  border-radius: 4px;
`;

3、 在组件的 components 对象中注册新创建的样式化组件：

export default {
  components: {
    StyledDiv
  }
};

4、 在 Vue 组件的模板中使用创建的样式化组件：

<template>
  <StyledDiv>
    <!-- Your content goes here -->
  </StyledDiv>
</template>

5、 动态样式：在模板字符串中，你可以使用 JavaScript 表达式动态计算样式。例如，根据属性更改样式：

const props = {
  bgColor: String
};

const DynamicStyledDiv = styled('div', props)`
  background-color: ${props => props.bgColor || '#f5f5f5'};
  padding: 16px;
  border-radius: 4px;
`;

export default {
  props: {
    bgColor:       String
  },
  components: {
    DynamicStyledDiv
  }
};

这样，DynamicStyledDiv 组件将使用传入的 bgColor 属性作为背景色。如果没有传入 bgColor，它将使用默认的 #f5f5f5 背景色。

示例：带有按钮的卡片组件

以下是一个使用 Vue 和 vue-styled-components 创建的简单卡片组件示例，该组件包含一个带有按钮的卡片。

1、 创建一个名为 CardWithButton.vue 的文件。

2、 在文件中编写组件的模板（template）、脚本（script）部分。我们将在脚本部分使用 vue-styled-components 来定义样式。

<template>
  <Card>
    <CardHeader>{{ headerText }}</CardHeader>
    <CardContent>
      <slot></slot>
    </CardContent>
    <CardFooter>
      <ActionButton @click="onButtonClick">{{ buttonText }}</ActionButton>
    </CardFooter>
  </Card>
</template>

<script>
import styled from "vue-styled-components";

const Card = styled.div`
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
`;

const CardHeader = styled.h3`
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 16px;
`;

const CardContent = styled.div`
  margin-bottom: 16px;
`;

const CardFooter = styled.div`
  text-align: right;
`;

const ActionButton = styled.button`
  background-color: #3f51b5;
  color: #ffffff;
  font-size: 14px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;

  &:hover {
    background-color: #283593;
  }
`;

export default {
  props: {
    headerText: {
      type: String,
      required: true
    },
    buttonText: {
      type: String,
      required: true
    }
  },
  components: {
    Card,
    CardHeader,
    CardContent,
    CardFooter,
    ActionButton
  },
  methods: {
    onButtonClick() {
      this.$emit("button-click");
    }
  }
};
</script>

现在，我们创建了一个使用 CSS-in-JS 的带有按钮的卡片组件。这个组件包含一个标题、内容区域和一个按钮。组件的样式使用 CSS-in-JS 定义。

以上就是 CSS-in-JS 在 Vue 中的用法，以及如何使用 vue-styled-components 来创建样式化组件。希望这篇学习笔记能帮助你理解 CSS-in-JS 的概念和实践。