情绪

情绪 是下一代CSS-in-JS.

对Vue3的支持.

安装

yarn add @egoist/vue-emotion

目录

• 使用量
  • 他们
  • 全局样式
  • 服务器侧渲染
• 洞穴
  • 组件选择器不工作( 尚未)
• 捐款
• 作者

使用量

使用插件 :

import { VueEmotion } from '@egoist/vue-emotion'

import { createApp } from 'vue'
import App from './App.vue'
import { VueEmotion } from '../../src/index'

import './index.css'

const app = createApp(App, { mixins: [VueEmotion] })

app.mount('#app')

创建您的样式组件 :

import { styled } from '@egoist/vue-emotion'

const Button = styled('button')`
  font-size: 15px;
`

const PinkButton = styled(Button)`
  color: hotpink;
`

const Component = {
  components: {
    Button,
    PinkButton,
  },
  setup() {
    return () => {
      return (
        <div>
          <Button>normal button</Button>
          <PinkButton>pink button</PinkButton>
        </div>
      )
    }
  }
}

参见 https://emotion.sh (英语) 更多的医生.

他们

使用 provide/inject数字 :

const Component = {
  components: {
    Button,
    PinkButton,
  },
  provide() {
    return {
      theme: this.theme
    }
  },
  data() {
    return {
      theme: 'dark'
    }
  },
  setup() {
    return () => {
      const Button = styled('button')`
        color: ${props => (props.theme === 'dark' ? 'white' : 'black')};
      `
       return <Button>Hello</Button>
    }
  }
}

这我知道 provide/inject 在通用应用代码中不建议使用,但是在我们找到更好的解决方案之前,把它当作工作.

全局样式

<template>
  <div id="app">
    <GlobalStyle />
    <!-- rest of your app -->
  </div>
</template>

<script>
import { createGlobalStyle } from '@egoist/vue-emotion'

const GlobalStyle = createGlobalStyle`
  body {
    background: red;
  }
`

export default {
  components: {
    GlobalStyle
  }
}
</script>

服务器侧渲染

您可以在服务器侧渲染时提取这样关键的 CSS :

const { renderStyle } = require('@egoist/vue-emotion/server')

// `html` is the rendered HTML by vue-server-renderer
const style = renderStyle(html)
// <style>...</style>

洞穴

组件选择器不工作( 尚未)

const Container = styled.div`
  ${Button} {
    color: red;
  }
`

捐款

1. 叉开它!
2. 创建您的特性分支 : git checkout -b my-new-feature
3. 提交更改 : git commit -am 'Add some feature'
4. 推到树枝上: git push origin my-new-feature
5. 提交拉动请求 : D

作者

情绪 © 电子化,在 麻省理工学院 执照.
EGOIST在撰稿人的帮助下编写和维护列表) (中文(简体) ).

github.com/egoist (英语) • GitHub 软件 @EGOIST(英语: • 推特 喜欢的