【问题标题】:How do you use css media queries in choo.js?你如何在 choo.js 中使用 css 媒体查询?
【发布时间】:2018-09-27 10:10:34
【问题描述】:

如果有人想知道

你在你的项目中安装 sheetify

使用 npm

npm install sheetify

然后在你的 choo 组件中

const html = require('choo/html')
const css = require('sheetify')

const yourVariable = css`
  :host {
    color: red;
  }

@media screen and (min-width: 768px) {
    :host {
      color: blue;
    }
  }

`
const yourComponent = () => {
 return html`
         <h1 class=${yourVariable}>This text is styled</h1>
 `
}
module.exports = yourComponent

【问题讨论】:

  • 问题在标题中,答案在内容中。是的。到目前为止,这是一个只有一个答案的问题;)

标签: javascript css media-queries


【解决方案1】:

你也可以将整个css导出为一个js模块并使用app.use('./path/to/module')

说您需要设置htmlbody 标签的样式

示例: 在app/assets/cssStyles.js

const css = require('sheetify')

module.exports = function () {
 return css`
     html, body {
        margin: 0;
        padding: 0;
  }
`
}

然后在你的根文件app/index.js

....
const styles = require('./assets/styles')

app.use(styles)
.....

【讨论】:

    猜你喜欢
    • 2012-08-24
    • 1970-01-01
    • 2021-08-21
    • 1970-01-01
    • 2022-01-25
    • 2013-05-07
    • 2011-08-10
    • 1970-01-01
    • 2021-08-23
    相关资源
    最近更新 更多