Comments (22)
not yet, but I hope I'll find the time to finalize it by Monday.
from tss-react.
Line 30 in 0e0dd95
You should use forwardRef
to make sure ref is forwarded
from tss-react.
This is due to an optimisation that MUI does internally. The only way I found to bypass de problem is to make tss-react use a different cache.
Hi, it's OK to have a different cache for MUI and tss-react for us, but the cache must come from the React Context. e.g. We can write this:
<MuiEmotionCacheProvider cache={cache1}>
<TSSReactEmotionCacaheProvider cache={cache2}>
{children}
from tss-react.
@Jack-Works I implemented the cache provider you suggested.
I hope it fits your needs.
Yes, it works in our product. Thanks for your work!
from tss-react.
@garronej thank you for update!
Take your time, you already did excellent job with makeStyles :)
I believe once its done your library will gather much more attention since upgrade from MUI 4 to MUI 5 will be much easier
from tss-react.
Hi @garronej,
withStyles works like a charm :)
The only difference I noticed comparing to MUI withStyles is lack of possibility to write combined styles like below
const MyButton = withStyles(Button, (theme) => ({
root: {
borderColor: [theme.palette.grey[700], "!important"],
},
}));
However it works fine if I just add these values
const MyButton = withStyles(Button, (theme) => ({
root: {
borderColor: theme.palette.grey[700] + " !important",
},
}));
from tss-react.
Hi @Jack-Works,
I have started to implement it but it turned out not to be as trivial as I though it would be.
- I gess we want to levrage mui's
classes
prop but there's an issue that have been open about it that I should adress first. - I can't implement the API as in mui because if the style object is provided first the type of
props
argument can't be inferred.
I will work on theses points, feel free to give feedback on the branch I just created.
from tss-react.
I can't implement the API as in mui because if the style object is provided first the type of props argument can't be inferred.
I'm only focused on extending the existing components with classes
props. In this case it;s easy to infer the types. Can you give an example of what are you considering?
function createMakeStyles<Theme>(useTheme) {
function withStyles<T>(Component: React.ComponentType<T>) {
type Classes = T extends { classes?: Partial<Record<infer U, string>> } ? U : never
return function appendStyles(style: StyleOf<Classes, T>) {}
}
}
from tss-react.
This is where I am at so far. I will do an overload of withStyles
to leverage the mui classes
prop.
I think our withStyles
can just be a function that takes two arguments, the component and the css rather than a higher-order function.
In mui they do first the css then the component but it can't be typesafe in this order.
You propose to provide the component first then the css. Which works type-wise but do you see a use case that would justify it to be a higher-order function rather than just a function with two parameters?
from tss-react.
You propose to provide the component first then the css. Which works type-wise but do you see a use case that would justify it to be a higher-order function rather than just a function with two parameters?
I guess it can be a single function. It just looks like a styled
to me. styled(Component)(style)
from tss-react.
Ok, now that I have addressed the problem related to the mui classes
props I will be abe to work on this.
By the way, the only way I found to make tss-react
work flawlessly with mui v5 is to make material-ui and tss-react use a different cache.
When the cache is explicitly provided to createMakeStyle
the contextual cache is no longer picked up. Is this something that could be troublesome in your case?
from tss-react.
When the cache is explicitly provided to createMakeStyle the contextual cache is no longer picked up. Is this something that could be troublesome in your case?
The contextual cache is important in our use case. Is there some features that cannot work with contextual cache? (We're not using SSR)
from tss-react.
Mui v5 classes
prop cannot work if tss-react
and mui uses the same emotion cache. Or rather it work but the style don't have priority so most often than not it will be overwriten by mui's default style unless you put ! important
.
This is due to an optimisation that MUI does internally. The only way I found to bypass de problem is to make tss-react
use a different cache.
If it's a problem for you I can try to work this out with the mui's team.
I oppened an issue on MUI.
from tss-react.
This is a can do, IDK why I didn't think of it myself. Let me implement that.
from tss-react.
@Jack-Works I implemented the cache provider you suggested.
I hope it fits your needs.
from tss-react.
I have upgraded to the latest version in DimensionDev/Maskbook#4163
from tss-react.
Hi, any update regarding withStyles ?:)
from tss-react.
@LabuzzMichal, sorry. I have worked extensively on this this week end but it still needs some more work before being released.
from tss-react.
Just a quick update to notify that I am working on this
from tss-react.
I pull it off eventually 🎉
It was extremely challenging to get the type inference right.
I will need an extra session to redact the documentation and to some more advanced testing.
Maybe it would be cool as well if it was possible to write:
const MyDivStyled= withStyle("div", { "root": { "color": "red" } });
Anyway it's available on the latest patch update. I will do a minor bump when everything is tested and documented.
from tss-react.
Great, thank you :)
Will check it tomorrow
from tss-react.
@LabuzzMichal thank you for the feedback.
It's all documented and tested
from tss-react.
Related Issues (20)
- How to opt out of RTL transformation? HOT 3
- <GlobalStyles /> don't work properly with next.js app folder HOT 7
- cannot Import multiple makeStyles HOT 1
- Use eslint rule to detect unused classed with imports HOT 2
- React 16.10.0 failed to install @ mui/material HOT 1
- How to use with css and styled apis. HOT 1
- yarn install with pnp mode complains about missing dependency @mui/material HOT 3
- NextJS/MUI/TSS - Cannot read properties of undefined (reading 'classes') HOT 3
- Hard reload after any file change HOT 2
- TssCacheProvider is not working when used with emotion cache and mui 5 HOT 6
- Using with Shadowed Web Components HOT 3
- Next.js: Applying augmentDocumentWithEmotionCache to document breaks AMP pages HOT 2
- The right way typing props when using withStyles HOT 3
- Invalid type for withStyles HOT 4
- Mantine integration
- Using `@import` rule within `<GlobalStyles />` component HOT 8
- `GlobalStyles` create multiple <style data-emotion="css-global">...<style> HOT 1
- Cannot read properties of undefined (reading 'length') in useGuaranteedMemo HOT 3
- MUI V5: Performance issues HOT 4
- Prop `className` did not match. HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tss-react.