Comments (7)
Thank you for reporting,
I will investigate although this is more likely to be related to emotion
.
When you type this: { root: { '&a': { backgroundColor: ... } } }
you want that the backgroundColor
only apply if the element the class is apply to is an <a>
am I correct? Like:
<div className={classes.roo} /> //Dosen't applies
<a className={classes.root} /> //Applies
from tss-react.
Ok, thanks for the detailed explanation.
I'll close for now as I have no way to fix it myself. :/
Maybe it would be worth opening an issue on the emotion repo...
PS: As you mentioned ReactRouter
maybe you'd like to checkout type-route, I love this lib!
from tss-react.
Also, I'm realizing that an empty class is created.
Is that something that's cleaned up in production mode? Or maybe a shortcoming of emotion?
If not, seems like something to optimize.
from tss-react.
I released a new version.
Is this by any chance related to your problem?
from tss-react.
It isn't, but it's nice to know that I can use dynamic names like that.
My issue stems from a quirk of MUI + ReactRouter.
This is part of the process of using the <List>
components in a custom <SubNav>
:
<ListItemButton
component={forwardRef<HTMLAnchorElement>((itemProps, ref) => (
<NavLink
activeClassName={classes.active} // this appears before ListItemButton's style
That said, I was able to get around this using '&[href]'
to add specificity.
I just figured it was worth noting that &-element references weren't being handled as I'd expect, to the point where I questioned whether &-non-pseudo worked.
from tss-react.
<a {...routes.fooBar().link}>Foo Bar</a>
Ooo, that is a nice solution.
I'm enjoying the surge of headless UI kits.
from tss-react.
Hi @awdyson,
I am sorry I had to update the API for nested selector. The approach based on css
was broken.
https://github.com/garronej/tss-react#selecting-children-by-class-name
from tss-react.
Related Issues (20)
- Import module error with Vite JS HOT 9
- lint errors with 4.8 but not with 4.7.7 HOT 2
- MUI styles overriding Tss react styles while upgrading to MUI v5 HOT 11
- Mixing multiple classes with nested selectors can lead to undesired output HOT 1
- eslint-plugin-tss-unused-classes detects every class as unused HOT 1
- Missing classname escaping HOT 1
- FOUC when using NextAppDirEmotionCacheProvider with prepend true HOT 8
- 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
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.