nesting styles about react-native-css HOT 9 CLOSED

Hi @alexmick, @sabeurthabti , I like the syntax as well!
It will allow us to get all the mainContainer styles using styles.mainContainer and apply them to the child elements of the container. We can then easily do something like: <Text style={mainContainerStyles.headerText}>Header</Text>

headerText should not have its parent attributes in my opinion. But it will give us the ability to distinguish a mainContainer.headerText from a footer.headerText for example.

from react-native-css.

headerText should not have its parent attributes in my opinion. But it will give us the ability to distinguish a mainContainer.headerText from a footer.headerText for example.

OK, we should make sure it's clear though because this might be confusing for people who commonly use scss nesting who could expect some kind of inheritance...

I'll be taking on a new react-native project very soon, I might implement this in the process, unless @Filipvdb321 is interested.

from react-native-css.

Hi @alexmick , this week I am a bit busy but next week I would be happy to work on the new feature.

from react-native-css.

@raz21 I don't think there's a css property for shadow-color or shadow-offset. You define them in box-shadow or text-shadow. Correct me if I'm wrong. Anyway, it's not related to this ticket.

from react-native-css.

That's an interesting point @Filipvdb321 , personally I've only ever used it without nesting and I don't think it was ever thought through.
What would you suggest as a syntax ? styles.mainContainer.headerText ? Should it have all the attributes of the parent as well in you opinion ?

from react-native-css.

@alexmick i am a fan of styles.mainContainer.headerText

@Filipvdb321 what do you think?

from react-native-css.

Hi Everyone,
I am also facing the same issue after conversion:
My Style.CSS

Wrapper{  
   background-color:#fff;
    border-radius:4;
    border-width: 1;
    border-color: #e1e8ee;
    shadow-color: rgba(0,0,0,.2);
    shadow-offset: {height:0, width:0};
    shadow-opacity:1;
    shadow-radius:1;	 
    elevation:3;
	  }

Getting converted it like:

"Wrapper":{"backgroundColor":"#fff",
"borderRadius":4,
"borderWidth":1,
"borderColor":"#e1e8ee",
"shadowColor":"rgba(0,0,0,.2)",
"shadowOffset":"{height:0, width:0"},";\t     
elevation:3;    
shadow-opacity:1;    
shadow-radius:1;
\tpadding-bottom:10;
\tmargin:10 15;\t  }

Want to add shadowOffset:{height:0, width:0}
How should I add it to css so that i could get it properly in style.js

Pls help me.

Thanks,
Rajesh

from react-native-css.

Hi @raz21,

As you're aware this is an open source project, we would love your contribution on this bug. I am able to help, as much as I can.

from react-native-css.

I needed this in one of my project so I took time and built a simple solution. Let me know what you think.

from react-native-css.