Preface
With the rise of the componentization era, front-end applications began to adopt component-level CSS encapsulation: through JavaScript declarations and abstract styles to improve the maintainability of components. The styles are loaded dynamically when the component is loaded and the class names are generated dynamically to avoid global pollution. styled-components are an outstanding representative of them. As its name indicates, styled-components declares styles in the form of components, separating styles from components, realizing the separation of logical components and presentation components.
The official Vue version of styled-components has not been updated for many years and is only supported to Vue2. So, how can you use styled-components in Vue3? After looking through Github, most of the libraries that replica vue-styled-components are either no longer updated or have no documentation or instructions.
But I still found a library with good quality:
vue-styled-components
Checked the documentation, restored most core APIs, and used them with the official onesstyled-componentsThere is not much difference. Let’s see how to use it.
use
Install
npm i @vvibe/vue-styled-components
styled native components
<script setup lang="ts">
import { styled } from '@vvibe/vue-styled-components'
const StyledLink = styled('a')`
color: darkred;
`
</script>
<template>
<StyledLink>Link</StyledLink>
</template>You can also call it in a chain
<script setup lang="ts">
import { styled } from '@vvibe/vue-styled-components'
const StyledLink = `
color: darkred;
`
</script>
<template>
<StyledLink>Link</StyledLink>
</template>Responsive style
<script setup lang="ts">
import { ref } from 'vue'
import { styled } from '@vvibe/vue-styled-components'
const borderColor = ref('darkred')
const inputProps = { borderColor: String }
const StyledInput = styled('input', inputProps)`
width: 100%;
height: 40px;
padding: 4px 8px;
border: 1px solid ${(props) => };
border-radius: 8px;
`
const input = () => ( = 'forestgreen')
const focus = () => ( = 'skyblue ')
const blur = () => ( = 'darkred')
</script>
<template>
<StyledInput placeholder="Type something" :borderColor="borderColor" @input="input" @focus="focus" @blur="blur" />
</template>Extended styles
<script setup lang="ts">
import { styled } from '@vvibe/vue-styled-components';
const BlueButton = `
width: 120px;
height: 40px;
margin-right: 8px;
padding: 4px 8px;
border-radius: 9999px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
background-color: skyblue;
font-weight: bold;
`;
const RedButton = styled(BlueButton)`
background-color: darkred;
color: white;
`;
</script>
<template>
<BlueButton>Blue Button</BlueButton>
<RedButton>Red Button</RedButton>
</template>Animation
<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 = `
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>theme
<script setup lang="ts">
import { styled, ThemeProvider } from '@vvibe/vue-styled-components'
const Wrapper = `
display: flex;
justify-content: space-around;
`
const StyledLink = `
margin-right: 8px;
color: ${(props) => };
font-weight: bold;
`
</script>
<template>
<Wrapper>
<a>This a normal link</a>
<ThemeProvider :theme="{ primary: 'red' }">
<StyledLink>This a theming link</StyledLink>
</ThemeProvider>
</Wrapper>
</template>For more details, see the documentation:
This is all about this article about using styled-components in Vue3. For more related content about using styled-components in Vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!