如何从组件访问自定义命名空间(react-)JSS主题?

时间:2017-12-08 12:31:10

标签: reactjs themes jss

我正在创建一个react / redux应用程序,并希望利用JSS主题来设置我的应用程序/组件的样式。我也在使用其他使用JSS主题的库,例如材质用户界面,因此我需要创建http://cssinjs.org/react-jss?v=v8.1.0#theming中描述的命名空间主题,以避免与其他主题冲突。

这是否意味着我必须在我希望使用该主题设置样式的每个组件中导入我的命名空间主题,并将其传递给injectSheet?即:

import React from 'react
import injectSheet, {ThemeProvider} from 'react-jss

// import my custom namespaced theming object...
import theming from '../path/to/my/custom/theming'

const styles = theme => ({
  container: {
    background: theme.background,
  }
})

const Demo = () => (
    <div className={props.classes.container}>
      //...
    </div>
)

// injectSheet with my custom namespaced theming object..
export default injectSheet(styles, {theming})(Demo)

这感觉非常麻烦。这是另一种应该这样做的方式吗?我错过了什么吗?在此先感谢:)

1 个答案:

答案 0 :(得分:1)

您可以将您的injectSheet函数包装在一个中心位置,并始终将主题传递给那里。