Comments (10)
That is the result I'd expect, but not the result I'm getting in my app. I'll continue to investigate and follow-up here.
Thanks for your help so far!
from tss-react.
Hi @sdornan,
This is a problem with MUI, not TSS react.
You could stop using tss-react
you'd still get the same behavior.
TSS enables to override your custom components's default styles. But it has no power over the MUI's component.
There is an ongoing PR in MUI that, I think, will fix this. See: mui/material-ui#32067
from tss-react.
Thanks for the pointer! In that case, this can be closed.
from tss-react.
Hi @sdornan,
Yet, if you could give me some aditional information.
Is:
Your primary collor in your MUI theme?
If yes, are you using MUI link like this
import Link from "@mui/material/Link";
<Link href="#" color="primary">Foo bar</Link>
If not, where does the geenish color come from?
from tss-react.
Correct, the green color is my primary color in my theme.
Since I am using Next.js, I'm using my own Link component that was adopted and customized from the Link component here: https://github.com/mui/material-ui/blob/master/examples/nextjs-with-typescript/src/Link.tsx
Here's the component: https://gist.github.com/sdornan/ca308046d76b766758a157c1174bbe14
from tss-react.
@sdornan,
I know there are issues in MUI with the CSS priority but with this particular component (<MuiLink/>
) I was unable to reproduce.
The priority of the styleOverrides
are supposed to be very low.
If I run this code:
import * as React from 'react';
import Link from "@mui/material/Link";
import { createTheme, ThemeProvider } from '@mui/material/styles';
import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import { useStyles } from "tss-react/mui";
export const muiCache = createCache({
"key": "mui",
"prepend": true
});
const theme = createTheme({
"components": {
"MuiLink": {
"styleOverrides": {
"root": {
"color": "green",
},
},
},
}
});
function TestComponent() {
const { css } = useStyles();
return (
<React.Fragment>
<Link href="https://example.com" >This text should be green (from theme override)</Link>
<Link href="https://example.com" color="secondary" >This text should be purple (from prop secondary)</Link>
<Link href="https://example.com" color="secondary" className={css({ "color": "pink" })}>This text should be purple (from className)</Link>
</React.Fragment>
);
};
render(
<CacheProvider value={muiCache}>
<ThemeProvider theme={theme}>
<TestComponent />
</ThemeProvider>
</CacheProvider>
);
I get this:
Which is what I expect.
Are you expecting something else?
from tss-react.
If I do
MuiLink: {
// root: {
// color: '#0068b5',
// textDecoration: 'none',
// },
styleOverrides: {
underlineNone: {
color: '#f9f9f6',
},
},
defaultProps: {
underline: 'hover',
color: '#0068b5',
},
},
then the styles are as I expect:
If I add back the commented out lines, then I get the doubled up color and text-decoration again. So I guess this is the solution I'll go with. I haven't had a chance to try to reproduce in a more minimal Next.js environment, but perhaps it's some sort of SSR issue.
from tss-react.
Are you using react 18?
from tss-react.
React 17.0.2
from tss-react.
Hi,
Could you give a try with the latest Next.js, react-dom and React version?
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.