aphrodite jss下載aphrodite jss源代碼下載

aphrodite jss

其他源碼

1.0.0

下載

JSS頂部的阿芙羅狄蒂樣API。

這個項目是阿芙羅狄蒂和JSS的好主意。它提供了阿芙羅狄蒂的API，但通過使用JSS作為引擎蓋下的渲染引擎來解決很多局限性和警告。

阿芙羅狄蒂的好部分。

幾乎就像從React知道的內聯樣式一樣，除了它允許使用整個CSS。
直到css()函數調用才生成CSS。只有傳遞的規則被轉換為CSS字符串並註入。
沒有任何頭痛或框架集成，可以進行主題。

與阿芙羅狄蒂相比的好處。

通過引擎蓋下的JSS渲染更強大的抽象。您正在使用所有它的插件和JSON DSL。僅舉幾例：
- 兒童，兄弟姐妹和任何其他選擇者。（JSS-NESTED）
- 全球樣式，無需自動命名領域（JSS-Global）。
立即對css()調用調用。它使您可以在渲染後立即訪問計算樣式，而無需使用setTimeout() 。它還避免了其他重新校準和重新粉刷，這可能會導致閃爍和一般性能開銷。
沒有自動“！重要”插入。不過，您可以為此編寫插件。

例子

 import { StyleSheet , css } from 'aphrodite-jss'

const sheet = StyleSheet . create ( {
  button : {
    border : '1px solid' ,
    borderRadius : 5 ,
    fontSize : 'inherit' ,
    lineHeight : '2.3em' ,
    padding : '0 1em' ,
    boxShadow : 'inset 0 1px 0 rgba(255, 255, 255, 0.1)' ,
    textShadow : '0 -1px 0 rgba(0, 0, 0, 0.25)' ,
    backgroundRepeat : 'repeat-x' ,
    color : '#fff' ,
    fontWeight : 400 ,
    '& span' : {
      marginRight : 5 ,
      color : '#fff'
    }
  } ,
  primary : {
    borderColor : '#1177cd #0f6ab6 #0d5c9e' ,
    backgroundImage : 'linear-gradient(to bottom, #2591ed 0%, #1177cd 100%)' ,
    backgroundColor : '#1385e5' ,
    '&:hover' : {
      backgroundImage : 'linear-gradient(to bottom, #3c9def 0%, #1385e5 100%)'
    }
  }
} )

document . body . innerHTML = `
  <button class=" ${ css ( sheet . button , sheet . primary ) } ">
    <span>&#10004;</span>Primary
  </button>
`

API

創建樣式表。

StyleSheet.create(styles)

創建功能不會渲染任何內容，它只是註冊您的樣式。

返回一個對象，密鑰名稱對應原始樣式obejct。

注入規則。

css(rule1, [rule2], [rule3], ...)

向DOM注入先前定義的規則。這是同步完成的，因此CSS規則可立即可用。

返回班級名稱。

樣式格式。

JSS中定義了樣式的格式。 Aprodisiac使用JSS-Preset-Default，因此所有默認的預設都已經到位。

定制JSS。

aphroditeJss(jss, [options])

您可以使用自定義設置傳遞自己的JSS實例。

返回Aphrodite的界面。

 import aphroditeJss from 'aphrodite-jss'
import { create } from 'jss'

const { css , StyleSheet } = aphroditeJss ( create ( ) )

服務器渲染。

您需要知道2個功能toString()和reset() 。由於Aphrodite-JSS不知道您正在呈現新響應，因此當您處理第一個請求並調用reset()以清理當前頁面所產生的樣式時，您需要獲得CSS（ toString() ）。

 import { toString , reset } from 'aphrodite-jss'

function render ( ) {
  const app = renderApp ( )
  const css = toString ( )
  reset ( )

  return `
    <head>
      <style>
        ${ css }
      </style>
    <head>
    <body>
      ${ app }
    </body>
  `
}