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>
  `
}