CSS

define('my-first-element', class extends WeElement {
  css() {
    return `h1 { color: red; }`
  }
  render(props) {
    return (
      <h1>Hello, world!</h1>
    )
  }
})
render(<my-first-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-first-element>, 'body')

你也可以在 JS 里动态拼接 CSS:

 css() {
    return `h1 { color: ${Math.random() > 0.5 ? "red" : "blue"}; }`
  }

你也可以另起一个文件用来写 CSS，但是需要配置一下 webpack to-string-loader：

{
  test: /[\\|\/]_[\S]*\.scss$/,
  use: [
      'to-string-loader',
      'css-loader',
      'sass-loader'
  ]
}

然后:

import { define, WeElement } from 'omi'
import style from '../style/_button.scss'
define('el-button', class extends WeElement {
    static pure = true
    css() {
        return style
    }
    ...
    ...