universal-decorator-style
v0.0.1
Published
组件装饰器,合并默认样式和自定义样式
Downloads
6
Maintainers
Readme
universal-decorator-style
组件装饰器,合并默认样式和自定义样式
导入
import style from 'universal-decorator-style';
代码演示
简单值
import style from 'universal-decorator-style';
@style({ // 默认样式集合
app: { width: 750 },
body: { backgroundColor: '#fff' },
footer: { height: 80 },
})
class App extends Component {
static displayName = 'App';
render() {
// 1.合并后的样式存放在this.styles下
// 2.如果默认样式和自定义样式中的某条规则有冲突,相应的自定义样式规则会覆盖默认样式规则
const { styles } = this;
return (
<View style={styles.app}>
<View style={styles.body}></View>
<View style={styles.footer}></View>
</View>
);
}
}
render(
<App
styles={{ // 自定义样式集合
app: { display: 'flex' },
body: { backgroundColor: '#ccc' }
}}
/>
);
函数
import style from 'universal-decorator-style';
@style({
app: { width: 750 },
body: {
backgroundColor: (props, state) => props.GRAY // 此处backgroundColor的值为函数,分别接受props和state作为参数
},
footer: {
height: (props, state) => state.footerHeight // 此处height的值为函数,分别接受props和state作为参数
}
})
class App extends Component {
static displayName = 'App';
state = {
footerHeight: 80,
};
render() {
const { styles } = this;
return (
<View style={styles.app}>
<View style={styles.body}></View>
<View style={styles.footer}></View>
</View>
);
}
}
render(<App GRAY={'#ccc'} />);