使用vue3+tsx开发的style怎么实现,一直觉得方案欠缺,vue-jss是慕课网学习时提供的方案,但是总觉得用的不是那么顺手,比如引入了UI框架,怎么用v-deep去修改框架组件样式,这个问题先保留,看下vue-jss支持是如何实现的
1.安装依赖
yarn add jss jss-preset-default vue-jss
2.引入并定义class
import { createUseStyles } from "vue-jss";
export const useStyles = createUseStyles({
container: {
background: 'red',
},
label: {
display: "block",
color: "#777",
},
errorText: {
color: "red",
fontSize: 12,
margin: "5px 0",
padding: 0,
paddingLeft: 20,
},
});
3.使用样式
import { useStyles } from "./styles";
export default defineComponent({
setup() {
const classesRef = useStyles();
const classes = classesRef.value;
return () => {
return (
<div class={classes.container}>
<span>123</span>
</div>
);
};
}
});