https://github.com/ghalex/vue-sx
vue-sx is a simple library that allows you to write clean CSS-in-JS for Vue
https://github.com/ghalex/vue-sx
emotion styled-system vue vue3
Last synced: 11 months ago
JSON representation
vue-sx is a simple library that allows you to write clean CSS-in-JS for Vue
- Host: GitHub
- URL: https://github.com/ghalex/vue-sx
- Owner: ghalex
- License: apache-2.0
- Created: 2022-05-07T07:47:24.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-10-21T07:49:03.000Z (over 3 years ago)
- Last Synced: 2025-07-19T12:48:23.482Z (12 months ago)
- Topics: emotion, styled-system, vue, vue3
- Language: Vue
- Homepage:
- Size: 172 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
VueSx
CSS-in-JS for Vue
vue-sx is a simple library that allows you to write clean CSS-in-JS for Vue
## Introduction
vue-sx is using [styled-system](https://styled-system.com/) and [emotion](emotion.sh) to allow you to write simple and clean css-in-js for Vue components. Inspired by `sx` prop from [@mui/material
](https://mui.com/system/basics/#the-sx-prop)
Some of the key features are:
- Customize styles inline with the `sx` prop
- Ergonomic responsive array-based values
- [Styled System](https://styled-system.com/) props
- Themeable and compatible with the [Theme Specification](https://styled-system.com/theme-specification)
- Built with [Emotion](emotion.sh) css prop
## Getting Started
```sh
npm i vue-sx
```
```vue
import { defineComponent } from 'vue'
import { Box, styled } from 'vue-sx'
const Custom = styled('div')({
border: '1px solid red',
bg: 'purple',
color: 'white',
m: [5, 3, 0]
})
export default defineComponent({
components: { Box, Custom }
})
theme.colors.primary,
color: 'white',
p: 2, // theme.space[2],
mt: 2
}}
as="button"
>
Click me
```
### `sx` Prop
The `Box` components accepts a `sx` prop that works with no additional setup required.
The `sx` prop is similar to Emotion's `css` prop, but allows you to use values derived from the theme object.
Box follows the [Theme Specification](), which means that any theme created for use with [Theme UI](), [Styled System](), or other similar libraries will work out-of-the-box.
This allows you to share design constraints for typography, color, and layout throughout your application using a theming context.
```vue
```
## Theming
To add a theme to an application, import the `ThemeProvider` component from `vue-sx` and pass a custom theme object in.
```vue
import { ref, defineComponent } from 'vue'
import { Box, ThemeProvider } from 'vue-sx'
const theme = {
breakpoints: [
'40em', '52em', '64em',
],
colors: {
text: '#000',
background: '#fff',
primary: '#07c',
},
space: [
0, 4, 8, 16, 32, 64, 128, 256,
],
}
export default defineComponent({
components: { Box, Custom },
setup() {
const currentTheme = ref(theme)
return { currentTheme }
}
})
It works
```