Overriding styles not working / theme not being applied #39

Activity

1. EdwardDrapkin commented on Mar 5, 2018

   

   EdwardDrapkin

   on Mar 5, 2018

   Last edited by EdwardDrapkin

   Author

   More actions

   Also, your example is terrible because it filters the Shoutem Theme stuff through about 100 layers of misdirection, making it a pretty useless demonstration of the theming capacity so much as someone showing off their react skills. The point of an example, especially if there's only one, is to demonstrate the bare minimum working code for a concept, not to show off cool stuff you can do later once you understand what's happening. Heading to the examples folder only to be further overwhelmed is exasperating to say the least.

   👎React with 👎1Reacted by Dan Alloway
2. EdwardDrapkin commented on Mar 5, 2018

   

   EdwardDrapkin

   on Mar 5, 2018

   Last edited by EdwardDrapkin

   Author

   More actions

   I realized I had the wrong prop (changed theme to style in StyleProvider) but I still am having no luck with styleNames:

   
   export default class App extends Component<*, State> {
       render() {
           return (
               <StyleProvider style={{
                   'test': {
                       '*.foo': {
                           backgroundColor: 'green'
                       },
                       '.foo': {
                           backgroundColor: 'green'
                       },
                       'test': {
                           '*.foo': {
                               backgroundColor: 'green'
                           },
                           '.foo': {
                               backgroundColor: 'green'
                           }
                       }
                   }
               }}>
                   <SafeAreaView style={{ flex: 1 }}>
                       <Test/>
                   </SafeAreaView>
               </StyleProvider>
           );
       }
   }
   
   class _Test extends React.Component<{
       style: Object
   }> {
       render() {
           const styles = this.props.style;
   
           return <View style={styles.test} styleName="foo">
               <Text>TEST</Text>
           </View>;
       }
   }
   
   const Test = connectStyle('test', {
       test: {
           backgroundColor: 'red'
       }
   })(_Test);