1.0.3 • Published 7 years ago
react-native-css-tree v1.0.3
react-native-css-tree
This is a react-native style module plug-in that features a modular JSON object tree structure.
Features
- Customizable Inheritance Middleware.
- Style tree namespaces.
- Global variables.
- Priority inheritance.
- Functional CSS.
Installation
npm install --save react-native-css-tree
Usage
import cssTree from 'react-native-css-tree';
const styles = cssTree({ //globalStyle
grid:10,
base:{
size: 10,
}
})((key, parent, sub)=>{ //middleware
return sub;
})({
container:{
flex: 1,
margin: "$grid",
padding: 5,
_box:{
height: 100,
},
text:(color)=>({
color,
fontSize: "$base.size"
})
},
});
<View style={styles.container}>
<View style={styles.container._box}></View>
</View>
Configuration
Styles = cssTree(GlobalStyle)(Middleware)(Style);
- GlobalStyle is used to configure global theme styles.
- Middleware supports multiple middleware functions.
- Style is original style tree:
$
reference variable, and support the operation.- If use
_
As a key prefix , it inherits all of the style properties of the parent.