I want to design a button component with Vue.
When I get main props, how can I get in css --mainColor variable without setting inline-style? thanks.
<script>
import Vue from "vue";
export default Vue.extend({
name: "Button",
props: {
text: {
type: String,
default: ""
},
main: {
type: String,
default: "#10b981"
}
}
});
</script>
<style lang="scss" scoped>
.btn {
--mainColor: #10b981;
display: inline-block;
border: 1px solid var(--mainColor);
color: var(--mainColor);
&:hover {
background-color: var(--mainColor);
color: #fff;
}
}
</style>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…