Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

component-style-sheet

fegodev1MIT0.0.1-pre-alpha

Export components you wish to style with classes, just like you know from CSS.

sheet, style, component, node, javascript

readme

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>
    )
}