Giter Site home page Giter Site logo

Comments (7)

garronej avatar garronej commented on June 16, 2024 1

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.

garronej avatar garronej commented on June 16, 2024 1

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.

awdyson avatar awdyson commented on June 16, 2024

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.

garronej avatar garronej commented on June 16, 2024

I released a new version.
Is this by any chance related to your problem?

from tss-react.

awdyson avatar awdyson commented on June 16, 2024

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.

awdyson avatar awdyson commented on June 16, 2024

<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.

garronej avatar garronej commented on June 16, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.