Closed DjordjePetrovic closed 8 years ago
@DjordjePetrovic Could you please give me a specific code example (e.g. component and styles) that shows what you're trying to achieve and how you currently do that?
@martinandert
let's say in component we have something like this
<div className="example">
<h3>{somedata.name}</h3>
<p>-||-<br/>
<p>-||-</p>
<p>-||-</p>
</div>
and in css
.example p:nth-of-type(1) {
// some custom style
}
.example p:nth-of-type(2),
.example p:nth-of-type(3) {
// some custom style
}
so I create cssToJS style object for "example" div, and what I wanted to do is to have something like
example : {
// some styling and then
"p:nth-child(1)" : {}
}
but I get "value must be a number or a string"
So I assume I'll have to create style object for every "p" element and then attach styling on every p like
<p className={styles.firstParagraf}></p>
<p className={styles.secoundParagraf}></p>
?
This looks like a reasonable use case which should be addressed.
I'm going to add support for it but this may take a few days since my spare time is somewhat limited currently. But I am always open for pull requests if you'd like to speed up the process.
@martinandert great tnx!
Hey @DjordjePetrovic, with version 1.2.0 you are now able to do
var styles = cssInJS({
example: {
// some styling
},
'example p': {
':nth-child(2)': {
// styles for p:nth-child(2) children
}
}
});
Please let me know whether that works for you.
For stuff like this in css
p:nth-of-type(1) {} p:nth-of-type(2) {} p:nth-of-type(3) {}
you basically need to create object with styling for every p and then attach it to that element? What's the best practice for this stuff?