✅ Style vue component or styled component
✅ Set default attrs
✅ Passed props
✅ Support theming
✅ Generate keyframes
✅ Generate css mixin
✅ Create global style
✅ Add or override attrs
✅ Support nesting css. (web only: https://drafts.csswg.org/css-nesting/#nesting)
npm i @vvibe/vue-styled-components
yarn add @vvibe/vue-styled-components
pnpm i @vvibe/vue-styled-components
<script setup lang="ts">
import { styled } from '@vvibe/vue-styled-components';
import OtherComponent from './VueComponent.vue';
const StyledDiv = styled('div')`
width: 100px;
height: 100px;
background-color: #ccc;
color: #000;
`;
const StyledStyledDiv = styled(StyledDiv)`
width: 100px;
height: 100px;
background-color: #000;
color: #fff;
`;
const StyledOtherComponent = styled(OtherComponent)`
width: 100px;
height: 100px;
background-color: red;
color: #fff;
`;
</script>
<template>
<StyledDiv>Styled Div</StyledDiv>
<StyledStyledDiv>Styled Styled Div</StyledStyledDiv>
<StyledOtherComponent>Styled Other Vue Component</StyledOtherComponent>
</template>
<script setup lang="ts">
import { styled } from '@vvibe/vue-styled-components';
const StyledDiv = styled.div.attrs({
class: 'styled-div'
})`
width: 100px;
height: 100px;
background-color: #ccc;
color: #000;
`;
</script>
<template>
<StyledDiv>Styled Div</StyledDiv>
<!-- <div class="styled-div">Styled Div</div> -->
</template>
You must define the props in the styled
function if you want to use them in the style. Because Vue components
require explicit props declaration so that Vue knows what external props passed to the component should be treated as
fallthrough attributes.(see Props Declaration)
<script setup lang="ts">
import { styled } from '@vvibe/vue-styled-components';
const StyledDiv = styled('div', {
color: String
})`
width: 100px;
height: 100px;
background-color: #ccc;
color: ${(props) => props.color};
`;
</script>
<template>
<StyledDiv color="red">Styled Div</StyledDiv>
</template>
<script setup lang="ts">
import { styled, ThemeProvider } from '@vvibe/vue-styled-components';
const StyledDiv = styled.div`
width: 100px;
height: 100px;
background-color: #ccc;
color: ${(props) => props.theme.color};
`;
</script>
<template>
<ThemeProvider :theme="{ color: '#fff' }">
<StyledDiv>Styled Div</StyledDiv>
</ThemeProvider>
</template>
You can use the keyframes
function to define a keyframe animation and then use the return value from keyframes
to
apply it to a styled component.
<script setup lang="ts">
import { styled, keyframes } from '@vvibe/vue-styled-components';
const rotate = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
const translate = keyframes`
0 {
transform: translateX(0);
}
50% {
transform: translateX(250%);
}
60% {
transform: rotate(360deg);
}
`;
const StyledBaseDiv = styled.div`
display: inline-block;
width: 100px;
height: 100px;
`;
const StyledRotateDiv = styled(StyledBaseDiv)`
background-color: skyblue;
animation: ${rotate} 2s linear infinite;
`;
const StyledTranslateDiv = styled(StyledBaseDiv)`
margin-left: 10px;
background-color: darkred;
animation: ${translate} 2s ease infinite alternate;
`;
</script>
<template>
<StyledRotateDiv />
<StyledTranslateDiv />
</template>
A function to create a style component
that can be used to handle global styles.
<script setup>
import { createGlobalStyle } from '@vvibe/vue-styled-components';
const GlobalStyle = createGlobalStyle`
body {
color: ${(props) => props.color};
}
`;
</script>
<template>
<GlobalStyle color="white" />
</template>
A function to generate CSS from a template literal with interpolations.
<script setup lang="ts">
import { styled, css } from '@vvibe/vue-styled-components';
const mixin = css`
color: red;
background-color: blue;
`;
const DivWithStyles = styled('div')`
${mixin}
`;
</script>
<template>
<DivWithStyles>Div with mixin</DivWithStyles>
</template>
A function to add attributes to a ComponentInstance
or HTMLElements
.
<script setup lang="ts">
import { withAttrs } from '@vvibe/vue-styled-components';
const DivWithAttrs = withAttrs('div', {
class: 'div-with-attrs'
});
const DivWithAttrs2 = withAttrs(DivWithAttrs, {
class: 'div-with-attrs-2'
});
</script>
<template>
<DivWithAttrs>Div with attrs</DivWithAttrs>
<DivWithAttrs2>Div with attrs 2</DivWithAttrs2>
</template>
<style scope>
.div-with-attrs {
color: red;
}
.div-with-attrs-2 {
color: blue;
}
</style>
More details see docs site
And thanks styled-components.