React Aphrodite Odd + Even Selectors
Question
Currently I am developing a simple application with React, I have chosen to use Aphrodite for handling my CSS.
However I've come across a problem which I cannot find the answer for and it's handling odd and even psuedo selectors. Has anyone got an example on how to use Aphrodite to handle odd + even psuedo.
2 answers
solution1
0 ACCPTED 2017-05-28 20:06:31
With Aphrodite you use a stylesheet in js and you can define a pseudo class with a string representation of it for an object key. It would look something like this
const styles = StyleSheet.create({
hover: {
':hover': {
backgroundColor: 'red'
}
},
... other styles here ...
});
so when using Aphrodite you use their css function to inject it into the <head>
<div className={css(styles.hover)}>I get a red background on hover!</div>
Here is a great video showing how to use Aphrodite (including pseudo classes!)
solution2
0 2017-05-28 21:45:40
The above answer is correct, I didn't realise what you can do is this..
const styles = StyleSheet.create({
red: {
backgroundColor: '#dedcdb'
},
nthChild: {
':nth-child(even)': {
backgroundColor: '#e8e8e8'
}
},
small: {
'@media (max-width: 600px)': {
backgroundColor: 'red',
}
}
});
Which will colour each even child with the correct colour.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.