vue.js - vue3怎么使用vue-styled-components？

Question

我的组件是这样的

<div class="card" style="width: 18rem;">  <img src="..." class="card-img-top" alt="...">  <div class="card-body">    <h5 class="card-title">Card title</h5>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>

我看别人给的案例都是写元素的，但我这里有类名

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

Answer 1

要在 Vue 中使用 styled-components，你需要确保已经安装了 @vue/styled-components 包。安装方法是通过 npm 或 yarn：

npm install @vue/styled-components# 或者yarn add @vue/styled-components

然后，在你的 Vue 组件中，你可以这样使用 styled-components：

<template>  <StyledCard>    <img src="..." alt="..." />    <div class="card-body">      <h5 class="card-title">Card title</h5>      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>      <a href="#" class="btn btn-primary">Go somewhere</a>    </div>  </StyledCard></template><script>import styled from 'styled-components';const StyledCard = styled.div`  width: 18rem;  background-color: #f5f5f5;  border-radius: 4px;  overflow: hidden;  display: flex;  flex-direction: column;`;export default {  components: {    StyledCard  }}</script>

在这个例子中，我们创建了一个 StyledCard 组件，它继承自一个 div 元素，并应用了一些样式。然后，在 Vue 组件的模板中，我们使用 StyledCard 组件来替代原始的 div 元素。

注意，我们不再需要直接在模板中写内联样式或类名。相反，我们把样式定义在 StyledCard 组件中，这使得样式和组件的结构更加分离，更易于维护和重用。

另外，如果你想保留原有的类名（如 card-img-top, card-body 等），你可以在 styled-components 中使用 & 符号来引用父选择器的类名：

const StyledCard = styled.div`  width: 18rem;  background-color: #f5f5f5;  border-radius: 4px;  overflow: hidden;  display: flex;  flex-direction: column;  & > img {    width: 100%;    display: block;  }  & > .card-body {    padding: 16px;  }`;

在这个例子中，& > img 和 & > .card-body 分别代表了 StyledCard 组件内部的直接子元素 img 和具有类名 card-body 的元素。这样，你就可以在 styled-components 中继续使用原有的类名了。