【翻译】React-jss 官方文档翻译（官方文档无法正常访问）

一只有梦想的肥柴
1,119 阅读15分钟

Packages

JSS 核心

API

  • 获取全局JSS实例

主包默认导出了一个全局的JSS实例，你也可以创建你自己的本地JSS实例。

import jss from 'jss'
  • 使用预设快速开始
import preset from 'jss-preset-default'
import jss from 'jss'

jss.setup(preset())
  • 创建一个自己的JSS实例

jss.create([options])

如果你构建的组件需要在不同的项目（可能是不同的JSS安装配置）中使用，那么使用自己的JSS实例。

关于jss.setup()看下面options对象的描述。

import {create} from 'jss'
import camelCase from 'jss-plugin-camel-case'
import somePlugin from 'jss-some-plugin'

const jss = create()
jss.use(camelCase(), somePlugin())
jss.createStyleSheet()

export default jss

jss.create(options)和jss.create().setup(options)相同

  • 安装JSS实例

jss.setup(options)

配置：

  1. createGenerateId：一个函数，返回一个生成唯一类名的函数
  2. plugins：一个函数数组，将会传入jss.use
  3. Renderer：如果是null，JSS将不会渲染DOM，否则传入一个自定义的Render
  4. insertionPoint：Dom内容节点的字符串，该节点标记了样式表的起始，或一个已经被渲染的DOM节点。Jss实例在该节点之后依次渲染样式表中的内容。
  5. id：createGenerateId的选项。这是一个对象，仅有一个属性minify，值类型为布尔值。

每个jss.setup()的调用将和旧的配置执行一个浅合并，plugins除外。所有传入的plugins将会被加入已存在的插件当中。

  • 添加一个插件

jss.use(plugin)

import global from 'jss-plugin-global'
import jss from 'jss'

jss.use(global())
  • 创建样式表

jss.createStyleSheet([styles], [options])

类通常都是默认生成的。

配置：

  1. media：媒体查询，样式元素的属性。
  2. meta：关于该样式表的meta信息，样式元素的属性。
  3. link：建立jss规则和DOM的css规则的联系来实现动态改变，默认为false，因为这需要消耗一些性能。
  4. element：样式元素，没有会默认创建一个。
  5. index：默认是0。决定了DOM渲染的顺序，越高的数字=越高的差异性。
  6. gnerateid：一个函数，生成唯一类名。
  7. classNamePrefix：一个字符前缀，会加在所有类名前面。
import jss from 'jss'

const sheet = jss
  .createStyleSheet(
    {
      button: {
        width: 100,
        height: 100
      }
    },
    { media: 'print' }
  )
  .attach()
  
console.log(sheet.classes.button) // button-d4f43g
  • 创建一个全局选择器的样式表

你需要安装jss-plugin-global插件

  • 注册样式表

SheetsRegistry

在服务器渲染时，你将会需要获得所有已经渲染的样式的字符串。SheetsRegistry类允许你合并然后序列化这些样式。（SSR）

如果你是在浏览器中使用SheetRegistry，并且你想要获取样式表，你可以查看attached配置。

import jss, {SheetsRegistry} from 'jss'

const sheets = new SheetsRegistry()
const sheet = jss.createStyleSheet()
sheets.add(sheet)
sheets.toString() // 字符形式返回所有样式表
sheets.toString({attached: true}) // 字符形式返回所有使用中的样式表
sheets.toString({attached: false}) // 字符形式返回所有未使用的样式表
  • 样式表管理器

SheetsManager

数一数有多少元素使用了相同的样式表，并且自动地附加或者分离。他的行为类似于WeakMap，因为可以使用对象作为键名。React-jss使用一个theme对象作为键值来识别样式表。

import jss, {SheetsManager} from 'jss'

const manager = new SheetsManager()
console.log(manager.size) // 0
const sheet = jss.createStyleSheet()
const key = {}

manager.add(key, sheet) // index
console.log(manager.size) // 1
manager.get(key) // sheet

// 将会将sheet附加到数量引用上
manager.manage(key) // sheet
// 将sheet与数量引用分离
manager.unmanage(key)
  • 移除一个样式表

jss.removeStyleSheet(sheet)

分离样式表并且从注册中移除。

  • 附加样式表

sheet.attch()

将样式表插入渲染树。调用他可以让样式表在布局中显示。

  • 指定顺序附加样式表

表1拥有更高的index，因此在最终的DOM中，他将在表2之后出现。

import jss from 'jss'

const sheet1 = jss.createStyleSheet({}, { inex: 5, meta: 'sheet-1' }).attach()
const sheet2 = jss.createStyleSheet({}, { inex: 1, meta: 'sheet-2' }).attach()
  • 在已经存在的样式表上添加一条规则

sheet.addRule([name], style, [options])

如果你的样式表已经附加到DOM上，这个函数将使用insertRuleAPI。如此一来，你在开发工具中的Element标签内将看不见CSS规则。你始终可以通过使用某些DOM节点上的选择器，和Style检查器中的样式来确认渲染正确。

如果你在attach()之前使用了addRule()，样式将会使用textContentAPI在同一批中渲染，就不会出现上述的副作用。

选项：

  1. index：rule需要被添加的index，默认，规则将在最后被加入。
  2. className：使用一个预设的类名来添加规则。

动态添加规则：

import jss from 'jss'

const sheet = jss.createStyleSheet({})
const rule = sheet.addRule({
  padding: 20,
  backgournd: 'blue'
})
  • 在已经存在的样式表中删除一条规则

sheet.deleteRule(name)

从DOM中移除一条规则，样式表的配置中link必须为true。如果删除成功则会返回true。

  • 获取一条规则

sheet.getRule(name)

通过样式表中的名称获取一条规则

import jss from 'jss'

const sheet = jss.createStyleSheet({myButton: {}})
// Using name
const rule = sheet.getRule('myButton')
  • 添加多条规则

sheet.addRules(styles)

你想分别在样式表中添加多条规则，或者甚至是在运行的时候。

import jss from 'jss'

const sheet = jss.createStyleSheet({})
sheet.addRules({
  myButton: {
    float: 'left'
  },
  something: {
    display: 'none'
  }
})
  • 更新函数值

sheet.update(data)

如果你使用函数值，你将会想要使用新的数据来更新他们。这个方法会调用所有的函数值，传入data参数，并按需更新css规则。

import jss from 'jss'

const styles = {
  container: {
    height: 200,
    width: data => data.width
  },
  button: {
    color: data => data.button.color,
    padding: data => data.button.padding
  }
}

const sheet = jss.createStyleSheet(styles, {link: true}).attach()

sheet.update({
  width: 100,
  button: {
    color: 'red',
    padding: 20
  }
})
  • 不用样式表创建一条规则

jss.createRule([name], style, [options])

直接对元素应用样式。

import jss from 'jss'

const rule = jss.createRule({
  padding: 20,
  background: 'blue'
})

import jss from 'jss'

const rule = jss.createRule('@media', {
  button: {
    color: 'red'
  }
})
  • 在元素行内应用一条规则

rule.applyTo(element)

这个等于element.style.background = 'red'，除非你使用已经定义好的样式表的一条规则。内部使用rule.toJSON()，因为应用了相同的限制。

imort jss from 'jss'

const element = document.getElementById('element')
jss
  .createRule({
    background: 'red'
  })
  .applyTo(element)
  • 动态地设置或者获取一条规则的属性

rule.prop(name, [value])

当link为true，当样式表被附加后，linker保存了CSS规则的引用，所以你可以在任何时候设置规则的属性。

import jss from 'jss'

const sheet = jss.createStyleSheet(
  {
    a: {
      color: 'red'
    }
  },
  { link: true }
)

// 获取color
console.log(sheet.getRule('a').prop('color'))

// 设置color
sheet.getRule('a').prop('color', 'green')
  • 将一条规则转化为json

rule.toJSON()

返回了一个规则的JSON表达式。只支持普通的跪着，不支持嵌套，条件，keyframes，fallbacks。

toJSON调用的结果之后可以在元素行内应用，使用rule.applyTo()

  • 转化为CSS

sheet.toString()

从JSS获取一个纯净的css字符。（例如当处理服务端渲染时）

import jss from 'jss'

const sheet = jss.createStyleSheet({
  button: {
    float: 'left'
  }
})

cosnole.log(sheet.toString())

.button-0 {
  float: left;
}
  • 生成你的类名

createGenerateId

配置项createGenerateId允许你指定一个函数，返回一个类名生成函数generateId(rule, sheet)。这个表达式用来允许JSS在需要的时候调用重置计数器。例如，在React-jss中服务端渲染下，在每次请求后重置计数器。

默认情况下，类名生成器使用一个简单地计数器来确保类名的唯一性。由classNamePrefix（样式表配置） + 规则名 + 计数器组成。

生产环境下，仅仅使用c+规则计数器。

import jss from 'jss'

const createGenerateId = () => {
  let counter = 0
  
  return (rule, sheet) => `pizza--${rule.key}-${counter++}`
}

jss.setup({createGenerateId})

const sheet = jss.createStyleSheet({
  button: {
    flaot: 'left'
  }
})

console.log(sheet.toString())

.pizza--button-1 {
  float: left
}
  • 压缩的选择器

当你想要在生产环境下压缩你的选择器，你可以在jss.setup调用中配置。

import jss from 'jss'

// 传入id配置给jss.setup，并且设置minify: true
jss.setup({ id: { minify: true } })

默认是禁止的


  • 提取动态样式

getDynamicStyles(styles)

提取一个仅包含函数值属性的样式对象。当你想要在元素之间共享一个静态的的部分，并且为每个单独的元素渲染动态样式。

import {getDynamicStyles} from 'jss'

const dynamicStyles = getDynamicStyles({
  button: {
    fontSize: 12,
    color: data => data.color
  }
})

console.log(dynamicStyles)

// {
//   button: {
//     color: data => data.color
//   }
// }
  • 插件

见插件部分

语法

基于对象样式语法来声明样式表

JSS设计旨在尽可能地接近CSS语法。但是也有例外情况。JSS使用基于插件的技术，所以插件添加了某些来自核心包的语法，以及一些其他来自可选插件的。你可以自行安装。

  • 基础语法
const styles = {
  button: {
    color: 'red',
    'font-size': '12px'
  }
}

编译为：

.button-0 {
  color: red;
  font-size: 12px;
}

  • 媒体查询
const styles = {
  button: {
    width: 100
  },
  '@media (min-width: 1024px)': {
    button: {
      width: 200
    }
  }
}

  • 属性名中使用ES6的常量
const minWidth = 1024

cosnt styles = {
  button: {
    width: 100
  },
  [`@media (min-width: ${minWidth}px)`]: {
    button: {
      width: 200
    }
  }
}

编译为：

.button-0 {
  width: 100px;
}
@media (min-width: 1024px): {
  .button-0 {
    width: 200px;
  }
}

  • 关键帧动画

关键帧的名称将使用相同的id生成函数作为类名。动画名将默认获取到作用域中（的名称）。在同一个样式表中获取，你可以使用$ref语法作为一个动画名称的值，或者属性。

const styles= {
  '@keyframes slideRight': {
    from: { opacity: 0 },
    to: { opacity: 1 }
  },
  container: {
    animationName: '$slideRight'
  }
}

编译为：

@keyframes keyframes-slideRight-0 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.container-1 {
  animation-name: keyframes-slideRight-0
}

  • fallbacks 备选
const styles = {
  container: {
    background: 'linear-gradient(to right, red 0%m greeb 100%)'m
    fallbacks: {
      background: 'red'
    }
  }
}

或者你想要在同一个属性中有多个备选

const styles = {
  container: {
    display: 'flex',
    fallbacks: [{ display: 'box' }, { display: 'flex-box' }]
  }
}

编译为：

.container-0 {
  background: red;
  bakcground: linear-gradient(to right, red 0%, green 100%);
}

  • 字型 font-face
const styles = {
  '@font-face': {
    fontFamily: 'MyWebFont',
    src: 'url(webfont.eot)'
  }
}

编译：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot')
}

多行font face

const styles = {
  '@font-face': [
    {
      'myWebFont',
  	  src: 'url(webfont.eot)'
    },
    {
      fontFamily: 'MySecondFont',
      src: 'url(webfont2.eot)'
    }
  ]
}

编译

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot')
}
@font-face {
  font-family: 'MySecondFont';
  src: url('webfont2.eot')
}

带有备选

const styles = {
  '@font-face': {
    fontFamily: 'MyWebFont',
    src: 'url(webfonr.eot)',
    fallbacks: [
      {src: 'url(webfont.eot) format(embedded-opentype)'},
      {src: 'url(webfont.woff2) format(woff2)'},
    ]
  }
}

编译为

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot');
  src: url(webfont.eot?#iefix) format(embedded-opentype);
  src: url(webfont.woff2) format(woff2);
}

  • 基本规则
const styles = {
  '@charset': '"utf-8"',
  '@import': 'url(http://mysite.com/custom.css)',
  '@namespace': 'url(http://mysite.com/xhtml)'
}

编译为

@charset: "utf-8";
@import url(http://mysite.com/custom.css);
@namespace url(http://mysite.com/xhtml);

  • 关于空格或者逗号分隔的值得另一种语法

要用js的方式去描述一空格或者逗号分隔的值，我们介绍一种基于数组的语法。

使用这种语法有一些优势：

  1. 插件jss-plugin-default-unit可以有效地设置默认单位和数值。
  2. 你可以在一个值声明中使用变量，而不用模板字符串或者字符结合。

逗号分隔的值：

const styles = {
  button: {
    background: ['url(image1.png)', 'url(image2.png)']
  }
}

编译为

.button-0 {
  background: url(iamge1.png), url(iamge2.png);
}

const styles = {
  button: {
    background: [
      ['url(image1.png)', 'no-repeat', 'top'],
      ['url(image1.png)', 'no-repeat', 'right'],
    ]
  }
}

编译为

.button-0 {
  bakcground: url(image1.png) no-repeat top, url(iamge2.png) no-repeat right;
}

空格分隔的值

const styles = {
  button: {
    margin: [[5,10]]
  }
}

编译为

.button-0 {
  margin: 5px 10px;
}

修改!important

const styles = {
 button: {
   color: [['red'], '!important'],
   margin: [[5, 10], '!important']
 }
}

编译为：

.button-0 {
  color: red !important;
  margin: 5px 10px !important;
}

content属性

当你将字符放到content属性中，需要双引号或者单引号。因此你也需要在content的字符串值中提供引号来匹配css中的表现。

const styles = {
  button: {
    '&:after': {
      content: '"JSS"'
    }
  }
}

编译为

.button-0-after {
  content: 'JSS'
}

颜色

你可以使用任何颜色转换工具。

import color from 'color'

const styles = {
  button: {
    color: color('blue')
      .darken(0.3)
      .hex()
  }
}

编译为

.button-0 {
  color: '#000003';
}

Typed CSSO

略



React-JSS

与React搭配使用的JSS集成

React-JSS集成了使用最新hook API的JSS。内置了JSS和默认的预设。

相比直接使用JSS包的好处：

  1. 动态主题 —— 允许基于context的主题以及运行时更新。
  2. 关键CSS提取 —— 只有渲染组件的CSS会被提取
  3. 懒计算 —— 当组件挂载的时候才会创建样式表，在卸载的时候移除
  4. 样式表的静态部分可以再所有元素之间共享
  5. 函数值和规则可以通过useStyles(data)传入任意数据来全自动更新。你可以传入属性，状态，或者任意来自context的东西。
  • 安装
yarn add react-jss

  • 基础
import React from 'react'
import {render} from 'react-dom'

// 创建你的样式。记住，由于React-JSS使用了默认的预设
// 大多数插件不需要更多配置就可以运行
const useStyles = createUseStyles({
  myButton: {
    color: 'green',
    margin: {
      // jss-plugin-expand 提供了更多可读的语法
      top: 5, // jss-plugin-default-unit 使其为5px
      right: 0,
      bottom: 0,
      left: '1rem'
    },
    '& span': {
      // jss-plugin-nested 使其为一个子元素
      fontWeight: 'bold'
    }
  },
  myLabel: {
    fontStyle: 'italic'
  }
})

// 使用这些样式来定义你的组件，并传入classes属性
const Button = ({children}) = {
  const classes = useStyles()
  return (
    <button className={classes.myButton}>
      <span className={classes.myLabel}>{children}</button>
    </button>
  )
}

const App = () => <Button>Submit</Button>

render(<App />, document.getElementById('root'))

编译为

<div id='root'>
  <button class='Button-myButton-1-25'>
    <span class='Button-myLabel-1-26>
      Submit
    </span>
  </button>
</div>

.Button-myButton-1-25 {
  color: green;
  margin: 5px 0 0 1rem;
}
.Button-myButton-1-25 {
  font-weight: bold;
}
.Button-myLabel-1-26 {
  font-style: italic;
}

  • 动态的值

你可以开箱即用地使用函数值，函数规则，可观测对象。一旦组件接受了新的属性，或者首次挂载的时候，函数值和函数规则会接受一个props对象。

注意： 静态的属性最先被渲染，以便函数值将拥有更高的优先顺序特性。

import React from 'react'
import {createUseStyles} from 'react-jss'

const useStyles = createUseStyles({
  myButton: {
    padding: props => props.spacing
  },
  myLabel: props => ({
    display: 'block',
    color: props.fontWeight,
    fontStyle: props.fontStyle
  })
})

const Button = ({children, ...props}) => {
  const classes = useStyles(props)
  return (
    <button className={classes.myButton}>
      <span className={classes.myLabel}>{children}</span>
    </button>
  )
}

Button.defualtProps = {
  spacing: 10,
  fontWeight: 'bold',
  labelColor: 'red'
}

const App = () => <Button fontStyle='italic'>Submit</Button>

  • 类名前缀
import React from 'react'
import {createUseStyles} from 'react-jss'

const useStyles = createUseStyles({
  myButton: {
    padding: props => props.spacing
  },
  myLabel: props => ({
    display: 'block',
    color: props.labelColor,
    fontWeight: props.fontWeight,
    fontStyle: props.fontStyle
  })
}, {name: 'Button'})

const Button = ({children, ...props}) => {
  const classes = useStyles(props)
  return (
    <button className={classes.myButton}>
      <span className={classes.myLabel}>{children}</span>
    </button>
  )
}

Button.defaultProps = {
  spacing: 10,
  fontWeight: 'bold',
  labelColor: 'red'
}

const App = () => <Button fontStyle="italic">Submit</Button>

  • 主题

这个想法是你定义一个主题，使用ThemeProvider包裹你的应用并传入theme对象给ThemeProvider。你就可以在你的样式创建函数获取到主题，并使用useTheme的钩子。然后，你可以改变你的主题，并且所有的组件都会获取到新的主题。

在react-jss下，为React使用独立的theming解决方案。在这里你可以找到安装的文档

关于ThemeProvider的使用

  1. 含有一个主题属性，可以使对象或者函数

    1.1 如果是队形，并在根使用ThemeProvider，然后会完整地传下React树。

    1.2 如果是对象，并使用嵌套的ThemeProvider，那么他会和父级的ThemeProvider合并。并传下React树。

    1.3 如果是函数，并使用嵌套的ThemePrivider。那么将会应用父级的ThemeProvider。如果结果是一个对象，那么会被传下React树。否则抛出异常。

  2. ThemeProvider像所有其他组件一样可以渲染单个子元素，因为他在渲染中使用React.Childern.only，否则抛出异常。

import React from 'react'
import {createUseStyles, useTheme, ThemeProvider} from 'react-jss'

// Using `theme` function is better when you have many theme dependant styles.
let useStyles = createUseStyles(theme => ({
  button: {
    background: theme.colorPrimary
  },
  label: {
    fontWeight: 'bold'
  }
}))

// Using function values might be better if you have only few theme dependant styles
// and also props or state is used for other values.
useStyles = createUseStyles({
  button: {
    background: ({theme}) => theme.colorPrimary
  },
  label: {
    fontWeight: 'bold'
  }
})

const Button = ({children, ...props}) => {
  const theme = useTheme()
  const classes = useStyles({...props, theme})
  return (
    <button className={classes.button}>
      <span className={classes.label}>{children}</span>
    </button>
  )
}

const theme = {
  colorPrimary: 'green'
}

const App = () => (
  <ThemeProvider theme={theme}>
    <Button>I am a button with green background</Button>
  </ThemeProvider>
)

  • 使用自定义的主题context

使用具有命名空间的主题，这样来自不同库的同样使用React-JSS的UI组件就不会互相冲突，或者你想要使用相同的主题，但是来自别的context。

import React from 'react'
import {createUseStyles, createTheming} from 'react-jss'

const ThemeContext = React.createContext({})

// Creating a namespaced theming object.
const theming = createTheming(ThemeContext)

// Note that `useTheme` here comes from the `theming` object, NOT from `react-jss` import.
const {ThemeProvider, useTheme} = theming

const useStyles = createUseStyles(
 {
   button: {
     background: ({theme}) => theme.colorPrimary
   }
   // Passing theming object to `createUseStyles()`
 },
 {theming}
)

const myTheme = {
 colorPrimary: 'green'
}

const Button = ({children, ...props}) => {
 const theme = useTheme()
 const classes = useStyles({...props, theme})
 return <button className={classes.button}>{children}</button>
}

const OtherLibraryThemeProvider = () => null
const OtherLibraryComponent = () => null
const otherLibraryTheme = {}

// Using namespaced ThemeProviders - they can be nested in any order
const App = () => (
 <OtherLibraryThemeProvider theme={otherLibraryTheme}>
   <OtherLibraryComponent />
   <ThemeProvider theme={myTheme}>
     <Button>Green Button</Button>
   </ThemeProvider>
 </OtherLibraryThemeProvider>
)

  • 类名生成选项

确保使用相同的安装无论是在服务器还是客户端。ID生成器用来生成类名和keyframes。

  1. 你可以通过自定义的生成函数属性，来修改类名生成算法
import React from 'react'
import ReactDom from 'react-dom'
import {JssProvider} from 'react-jss'
import MyApp from './MyApp'

const generateId = (rule, sheet) => 'some-id'
ReactDOM.render(
  <JssProvider generateId={generateId}>
    <MyApp />
  </JssProvider>,
  document.getElementById('root')
)

  1. 你可以添加一个额外的前缀给每个类名

  2. 你可以通过传入id属性来压缩类名

import React from 'react'
import ReactDOM from 'react-dom'
import {JssProvider} from 'react-jss'
import MyApp from './MyApp'

ReactDOM.render(
  <JssProvider id={{minify: true}}>
    <MyApp />
  </JssProvider>,
  document.getElementById('root')
)

  • 服务端渲染

应用挂载以后，你应当移除服务端渲染的由关键css设置的样式标签

import React from 'react'
import {renderToString} from 'react-dom/server'
import {JssProvider, SheetsRegistry, createGenerateId} from 'react-jss'
import MyApp from './MyApp'

export default function render(req, res) {
  const sheets = new SheetsRegistry()
  const generateId = createGenerateId()

  const body = renderToString(
    <JssProvider registry={sheets} generateId={generateId}>
      <MyApp />
    </JssProvider>
  )

  // Any instances using `useStyles` within `<MyApp />` will have gotten sheets
  // from `context` and added their Style Sheets to it by now.

  return res.send(
    renderToString(
      <html lang="en">
        <head>
          <style type="text/css">{sheets.toString()}</style>
        </head>
        <body>{body}</body>
      </html>
    )
  )
}

  • React树遍历

用于遍历HTML渲染外的React树，你应该加上disabledStylesGeneration属性

import React from 'react'
import ReactDOM from 'react-dom'
import bootstrapper from 'react-async-bootstrapper'

import {JssProvider} from 'react-jss'
import MyApp from './MyApp'

const App = ({disableStylesGeneration}) => (
  <JssProvider disableStylesGeneration>
    <MyApp />
  </JssProvider>
)

async function main() {
  await bootstrapper(<App disableStylesGeneration />)
  ReactDOM.render(<App />, document.getElementById('root'))
}

main()

  • 自定义安装

如果你想要指定一个JSS版本以及使用的插件。你应该创建自己的JSS实例，安装插件，并传入JssProvider

import React from 'react'
import {create as createJss} from 'jss'
import {JssProvider} from 'react-jss'
import vendorPrefixer from 'jss-plugin-vendor-prefixer'

const jss = createJss()
jss.use(vendorPrefixer())

const App = () => null
const Component = () => (
  <JssProvider jss={jss}>
    <App />
  </JssProvider>
)

你也可以获取默认的JSS实例

import {jss} from 'react-jss'

  • 多树安装

略


  • 注入顺序

样式标签的注入与createUseStyles()的顺序相同。资源顺序特性越高，在树中的样式标签顺序就越低。所以你应该先调用你想要覆盖的组件的createUseStyles。

import React from 'react'
import {createUseStyles} from 'react-jss'

// 一旦组件挂载将最先渲染，因为`createUseStyles()`调用顺序很重要。
const useLabelStyles = createUseStyles({
  label: {
    color: 'red'
  }
})

const useButtonStyles = createUseStyles({
  button: {
    color: 'red'
  }
})

// 将会第一个渲染样式
const Label = ({children}) => {
  const classes = useLabelStyles()
  return <label className={classes.button}>{children}</label>
}

const Button = () => {
  const classes = useButtonStyles()
  // 这些组件的渲染顺序我们不关心
  // 只关心调用`createUseStyles()`的顺序
  return (
    <>
      <button className={classes.button} />
      <Label>My button</Label>
    </>
  )
}

  • TypeScript

TODO



Styled-JSS



默认预设

预设可以使用默认配置和默认插件快速安装并开发。不需要关注安装插件。

  • API

preset()

导出了一个默认的函数，接受options对象。options是插件名的一个映射(驼峰命名)，值为插件配置。

返回了一个JSS配置对象，你可以传入JSS构造器或者安装setup。

import preset from 'jss-preset-default'

preset({somePlugin: {})
  • 安装全局JSS实例
import jss from 'jss'
import preset from 'jss-preset-default'

jss.setup(preset())
  • 安装自定义JSS实例
import {create} from 'jss'
import preset from 'jss-preset-default'

const jss = create(preset())



官方插件


jss-plugin-rule-value-function

jss-plugin-rule-value-observable

jss-plugin-template

jss-plugin-cache

jss-plugin-global

jss-plugin-extend

jss-plugin-nested

jss-plugin-compose

jss-plugin-canmel-case

jss-plugin-default-unit

jss-plugin-expand

jss-plugin-vendor-prefixer

jss-plugin-props-sort

jss-plugin-isolate

avatar
文章
阅读
粉丝
相关推荐
🎉 unibest 官方文档出来啦 🎉
16k阅读
 · 
172点赞
rollup官方文档逐句翻译（1）
9.4k阅读
 · 
8点赞
在 React Router 中使用 JWT
302k阅读
 · 
172点赞
重读 React 官方文档
2.4k阅读
 · 
32点赞
[保姆级] Vue3 开发文档
88k阅读
 · 
2.2k点赞
Selector 文档翻译
1.0k阅读
 · 
1点赞
React新文档介绍（chatgpt翻译）
3.0k阅读
 · 
22点赞
把React新文档投喂给 GPT-4 后...
37k阅读
 · 
320点赞
React 正式推出全新官方文档！
29k阅读
 · 
207点赞
基于 ChatGPT 和 React 搭建 JSON 转 TS 的 Web 应用
254k阅读
 · 
214点赞

友情链接：