nesting styles

[Filipvdb321]

Hi guys, I love your module.

One thing about nesting. I see that this sass:

mainContainer {
  flex: 1;
  padding: 30px;
  backgroundColor: #FF9900;
  flexDirection: column;

  headerText {
    color: white;
  }
}

Is converted into:

"mainContainer headerText":{"color":"white"}

Which means I need to select it in react like this:

<Text style={styles['mainContainer headerText']}>Header</Text>

Was this how you intended it to work? Or you have a better suggestion about how to use it?

[alexmick]

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 ?

[thabti]

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

@Filipvdb321 what do you think?

[Filipvdb321]

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.

[alexmick]

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.

[Filipvdb321]

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

[raz21]

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

[thabti]

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.

[siemiatj]

@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.

[siemiatj]

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