Component Style Sheet

React Native example

Create the import file

./some/location/CSS.js

// ...
import { Text, View, ScrollView, StyleSheet } from 'react-native';
import { applyStylesheet } from 'component-style-sheet';

const CSS = applyStylesheet({
	components: {
		View,
		ScrollView,
		Text
	},
	stylesheet: StyleSheet.create({
		'Text': { // Set the default style
			color: 'blue',
			fontSize: 18,
		},
		'Text.red': { // Overwrite default style with classes
			color: 'red'
		},
		'.h1': {
			fontWeight: 'bold',
			fontSize: 24
		},
		'View.container': {
			paddingLeft: 12,
			paddingRight: 12
		},
		".bg-blue": { // Applies to all types of components
			backgroundColor: 'blue'
		}
	}),
	classPropName: 'class'
})

module.exports = {
	// Export your stylable components
	...CSS,
	// Pre-styled components are possible too:
	H1: props => (<CSS.Text class={'h1 ' + props.class} />)
}

Import stylable components anywhere in your project:

./some/location/SomeComponent.js

// ...
import { View, Text } from './some/location/CSS.js';

export default MyComponent = (props) => {
	return(
		<View class="container">
			<H1>I already have some styles</H1>
			<Text>This text is blue by default</Text>
			<Text class="red">This text applies default styles but overwrites color to red</Text>
			<Text class="red bg-blue" style={{ color: 'green' }}>Multiple classes and manual overwriting is possible too</Text>
		</View>
	)
}