-
-
Notifications
You must be signed in to change notification settings - Fork 399
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
Make sure styled-system is supported #974
Comments
Haven't really tested it recently, but styled-system should "just work" with |
I wonder if it also can work with react-jss and the future version of it based on hooks (prototype https://github.com/cssinjs/react-jss-hook) |
It should already work with react-jss |
this only works with react-jss @ alpha-10 |
Putting high prio on that bug. |
I think the issue is that EDIT: The reason why this is not a problem for |
Would love to see this also. |
What is the relationship between https://material-ui.com/system/basics/ and JSS here? |
MUI style system is an independent effort by @oliviertassinari inspired by styled-system. It is a separate package https://github.com/mui-org/material-ui/tree/next/packages/material-ui-system and seems to have no direct dependency on JSS, but can be used together. I am also porting (right now) an SC-like, similar to styled-jss into the react-jss package to support styled-system and SC-pattern users. |
@kevinSuttle what specific use case from primitives-core are you interested in? |
Nothing in particular. It's just another approach—one that isn't included in the Prior Art section here: https://material-ui.com/system/basics/#prior-art |
Turns out styled system doesn't depend on SC pattern at all, those are just functions. I was confused by the fact they expose propTypes, so I thought they must be rendered as components, but actually those propTypes need to be merged into user component manually if you want the warnings. The only thing that is actually special about styled system is the data structure which is used to return the styles: [
[
{
"paddingTop": "32px"
},
{
"paddingBottom": "32px"
},
[
{
"paddingLeft": "16px"
},
{
"@media screen and (min-width: 40em)": {
"paddingLeft": "32px"
}
}
],
[
{
"paddingRight": "16px"
},
{
"@media screen and (min-width: 40em)": {
"paddingRight": "32px"
}
}
]
],
[]
] space({theme, px: [3,4], py: 4}) Also there is a hard dependency on |
Turns out v3 of styled-system just works without any extra code, the only thing one needs to do is to set const styles = {
root: compose(
space,
color,
fontSize,
width,
fontWeight,
lineHeight
)
}
const MyComponent = ({classes}) => <div className={classes.root} />
const MyStyledComponent = withStyles(styles, {injectTheme: true})(MyComponent)
const renderer = TestRenderer.create(
<ThemeProvider theme={theme}>
<MyStyledComponent
px={[3, 4]}
py={[1, 2]}
color="white"
bg="blue"
fontSize={[4, 5, 6]}
fontWeight="bold"
/>
</ThemeProvider>
) |
@kof Heads up: I've started a PR here: styled-system/styled-system#473 and it's now published as |
How does that affect performance, especially with regards to https://styled-system.com/babel-plugin? |
@jxnblk nice, gonna try it out in a bit |
@kevinSuttle the babel plugin package is experimental and does not use the same code base as Styled System core |
@jxnblk I confirm styled-system@4.2.0-0 works with my tests |
Styled-System by @jxnblk https://github.com/jxnblk/styled-system seems like a very solid approach for building design systems. I think we should look into it and see how it can be supported.
Todo
The text was updated successfully, but these errors were encountered: