-
Notifications
You must be signed in to change notification settings - Fork 25
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Components selectors #40
Comments
Hi @goodmind! We have not supported this yet, but it looks like a good case. I'll try to implement this soon 👍 |
But we're open for PR of course 😄 |
@lttb it looks like |
not exactly, let me explain how it works we can separate properties on static and dynamic values (function values). static values are the same for each instance, and we can use just one classname for all instances, so we generate classname for static properties immediately and share it for all instances of created styled component. but if we have function values, we need to have its' own classname of dynamic values for each instance, that's why we generate dynamic classname in the constructor.
therefore with 1st and 3d cases we can use static classname in But I don't want to generate additional static classname in the 2nd case. The possible solution is that we can generate it in lazy mode, just on And, just to note, the possible temporary workaround may look like this: const styled = Styled({
message: {
'&:not(:first-child) $AuthorName': {
display: 'none'
},
'&:not(:last-child) $StyledPeerPhoto': {
visibility: 'hidden'
}
}
})
const MyAuthorName = styled(AuthorName)({composes: '$AuthorName'})
const MyAvatar = styled(Avatar)({composes: '$StyledPeerPhoto'})
const Message = styled('div')({composes: '$message'}) |
You can check an example here: https://www.webpackbin.com/bins/-KrDP1-pNR8ddDXK-gR5 |
I think there's should be |
right, it's a typo |
oh, I'm sorry forgot another one approach like this :) but I'd prefer styled-components way const styled = Styled({
message: {
'&:not(:first-child) $authorName': {
display: 'none'
},
'&:not(:last-child) $styledPeerPhoto': {
visibility: 'hidden'
}
},
authorName: {},
styledPeerPhoto: {}
})
const Message = styled('div')({composes: '$message'})
export default injectStyled(styled)(({classes}) => (
<Message>
<AuthorName className={classes.authorName}>author</AuthorName>
<Avatar
className={classes.styledPeerPhoto}
src="https://avatars2.githubusercontent.com/u/11135392?v=4&s=88"
/>
</Message>
)) |
Hi @goodmind, We've finally released this feature! You can check your example here https://www.webpackbin.com/bins/-KwJAMdFdN8myP7g6dpD |
Is this possible with
styled-jss
?The text was updated successfully, but these errors were encountered: