css-in-js 之 vue

佛天华

已于 2025-04-22 10:36:36 修改

阅读量1.8k

点赞数

分类专栏： H5 文章标签： javascript vue.js css

于 2023-02-24 14:44:59 首次发布

本文链接：https://blog.csdn.net/fth1002853070/article/details/129200317

版权

H5 专栏收录该内容

32 篇文章

订阅专栏

文章介绍了如何在Vue项目中使用vue-styled-components库来实现CSS-in-JS，允许用JS编写CSS样式。通过示例展示了如何封装组件，接受props并动态地应用样式。最后提到了这种方法将所有样式合并到一个类中，提高了渲染速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS-in-JS就是可以使用JS来编写CSS样式，这原本是React的专属，现在可以在Vue中应用，依赖包：vue-styled-components。

需要安装以下依赖：

$ npm i vue-styled-components @vue/babel-helper-vue-jsx-merge-props  @vue/babel-preset-jsx  --save-dev

并修改 babel.config.js

presets: [
		...,
		'@vue/babel-preset-jsx'
	],

1、组件封装

import styled from 'vue-styled-components';
import Vue from 'vue';

const img = require('@/assets/images/brain/data-changdao/scenic-point-bg.png');
const img1 = require('@/assets/images/brain/data-changdao/scenic-point.png');

// 通过 props 给组件传参，并动态的传递到css中
const div1 = styled('div', {
	width: {
		type: Number,
		default: 10
	}
})`
	width: ${props => props.width}rem;
	height: 0.62rem;
	margin-bottom: 0.6rem;
	padding: 0 0.36rem;
	background: url(${img}) no-repeat;
	background-size: contain;
`;
const div11 = styled.div`
	font-size: 0.38rem;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
`;
const div11_img = styled.img`
	width: 0.43rem;
	height: 0.4rem;
	margin-right: 0.17rem;
`;
const div11_span = styled.span`
	display: inline-block;
	width: 3.5rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
`;
const div12 = styled.div`
	font-size: 0.48rem;
	font-family: PingFang SC;
	font-weight: 600;
	color: #FFFFFF;
`;
const div12_span1 = styled.span``;
const div12_span2 = styled.span`
	font-size: 0.33rem;
	color: rgba(255, 255, 255, 0.6);
`;

export default Vue.component('Scenic', {
	props: {
		scenicTicketName: String,
		count: String,
		pe: String
	},
	render: function (h) {
		return (
			<div1 class='flex f-jc-sb' width={ this.pe }>
				<div11>
					<div11_img src={img1} />
					<div11_span>{ this.scenicTicketName }</div11_span>
				</div11>
				<div12>
					<div12_span1>{ this.count }</div12_span1>
					<div12_span2> 人  { this.pe }%</div12_span2>
				</div12>
			</div1>
		);
	}
});

2、父组件中使用

<ScenicContainer
	v-for="(item, index) in hotScenic"
	:key="index"
	:scenicTicketName="item.scenic_ticket_name"
	:count="item.count"
	:pe="item.pe"
/>