)
}
```
## Styling
In addition to the [CSS features that `vite` supports](https://vite.dev/guide/features.html#css), you can also use [Vanilla Extract](https://vanilla-extract.style/) for styling.
First install the `@vanilla-extract/css` package:
```sh
npm install @vanilla-extract/css
```
Then, add a `style.css.ts` file for your workshop:
```ts
// src/__workshop__/style.css.ts
import {style} from '@vanilla-extract/css'
export const container = style({
display: 'grid',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
width: '100%',
})
```
And finally, import the `container` className and use it in your workshop:
```diff
import {
defineScope,
useBoolean,
useNumber,
useSelect,
useString,
useText,
} from '@sanity/ui-workshop'
+import {container} from './style.css'
export default defineScope({
name: 'test',
title: 'Test',
stories: [
{
name: 'test',
title: 'Test',
component: TestStory,
},
],
})
const options = {
None: '',
Small: 'sm',
Medium: 'md',
Large: 'lg',
}
function TestStory() {
const text = useText('Text', 'Hello, world')
const boolean = useBoolean('Boolean', true)
const number = useNumber('Number', 1234)
const string = useString('String', '...')
const option = useSelect('Select option', options)
return (
-
+
This is my first story.
Some text: {text}
A boolean: {boolean ? 'true' : 'false'}
A number: {number}
A string: {string}
An option: {option}
)
}
```
## License
[MIT](LICENSE)
---
_Source: https://npm.io/package/@sanity/ui-workshop · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._