@vue-styled-components/core
v1.9.0
Published
<div align="center"> <img alt="Owner avatar" src="https://vue-styled-components.com/logo.png" width="220px" /> <h1>Vue Styled Components</h1> A CSS tool similar to styled-components and support for vue 3. Help you to develop your apps fastly!
Downloads
1,178
Maintainers
Readme
[!IMPORTANT] The package has been moved to new npm org @vue-styled-components/core and the old org has been deprecated. Please use the new package instead.
✨Feature
✅ 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.
✅ Auto-prefix css.
...
📖Documentation
For detailed introduction and usage instructions, please refer to the documentation website
🚀Getting Start
📦Install
npm i @vue-styled-components/core
yarn add @vue-styled-components/core
pnpm i @vue-styled-components/core
💅Basic
<script setup lang="ts">
import { styled } from '@vue-styled-components/core';
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>
🔧Attrs Setting
<script setup lang="ts">
import { styled } from '@vue-styled-components/core';
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>
🕹️Control Dynamic Style by Props
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 '@vue-styled-components/core';
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>
🧙Theming
<script setup lang="ts">
import { styled, ThemeProvider } from '@vue-styled-components/core';
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>
More details see docs site
🧑🤝🧑Contributors
And thanks