0.0.4 • Published 7 years ago
chanjet-nova-ui-theme v0.0.4
chanjet-nova-ui-theme
使用方法说明
实现支持 theme 的 React Component?
现在，我们以一个简单的支持 theme 的组件 InputGroup
来示范。InputGroup 是一个水平布局的组件，其中可以包含 Icon、Input，假设我们这里的 Icon，Input都已经实现了 theme 化管理，现在示例 InputGroup 如何实现 theme 的支持。
InputGroup.js
import React, {createElement} from 'react';
import classnames from 'classnames';
import {connectStyle} from 'chanjet-nova-ui-theme';
const InputGroup = props => {
let {className, children, ...others} = props;
// classnames 支持将多个 className 进行合并
className = classnames[className];
return (
<div className={className} {...others}>
{children}
</div>
)
}
InputGroup.propTypes = {
}
const StyledInputGroup = connectStyle('chanjet.ui.InputGroup')(StyledInputGroup);
export {
StyledInputGroup as InputGroup
}定义你的 ui theme
Theme.js
const theme = {
// 组件样式声明，key 为 InputGroup.js 中 connectStyle 声明的名称。
'chanjet.ui.InputGroup': {
'chanjet.ui.Icon': {
display:'inline-block',
marginRight: '4px',
},
'chanjet.ui.Input': {
display:'inline-block'
},
‘.small': {
height: '32px'
},
display:'inline-block',
verticalAlign: 'middle'
}
}
export default theme;在你的App中使用
App.js
import React from 'react';
import {StyleProvider} from 'chanjet-nova-ui-theme';
import InputGroup from './InputGroup';
import Icon from './Icon';
import Input from './Input';
import theme from './Theme';
export default App extends React.Component {
render() {
return (
<StyleProvider style={theme} mountNode='stylesheet'>
<div>
<h1>It Works!</h1>
<InputGroup styleName="small">
<Icon name="ic_access_alarm" />
<Input type='number' />
</InputGroup>
</div>
</StyleProvider>
)
}
}
render(<App />, document.querySelector("#app"));index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div id="app">Loading...</div>
</div>
<style id="stylesheet"></style>
</body>
</html>