Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Mathieu Marques
    @angrybacon
    Styles are correctly formed, and adding them by hand in root does work as expected

    But writing it like so:

    export default theme => ({
      root: props => ({
        ...
        '&&': props.configuration.chatbox.styles,
      }),
    });

    Works. What am I missing?

    winterskh
    @winterskh
    Hii
    Evan Garrett
    @evang522

    @kof thanks for the info!

    I asked a stack overflow question about this, but also concerning the disappearing HOC API. Would you mind giving me your feedback on this? I have perhaps misunderstood jss' plan for the future.

    https://stackoverflow.com/questions/57675410/how-to-use-react-jss-within-react-class-components

    Remi Vledder
    @StudioSpindle
    Hello! From which version has createUseStyles (as described here: https://cssinjs.org/react-jss/?v=v10.0.0-alpha.24) been introduced?
    Evan Garrett
    @evang522
    @StudioSpindle createUseStyles has been in v10 since version alpha.17
    https://github.com/cssinjs/jss/releases/tag/v10.0.0-alpha.17
    Remi Vledder
    @StudioSpindle
    Perfect. I see. Thanks 👍
    Remi Vledder
    @StudioSpindle
    Very nice! Love how this simplifies and keeps the code clean.
    Oleg Isonen
    @kof
    @evang522 so the problem is that you plan to keep using class based components long term. Can you make a good example that shows why?
    "sometimes functional components aren't the best or most organised solution to writing a component." is very vague
    Moshe Brevda
    @mbrevda
    I'm trying to use an unsupported rule (@page) and receiving an error that jss doesn't recognize it. How can I inject "raw" css?
    winterskh
    @winterskh
    Jitt
    winterskh
    @winterskh
    Hi
    Oleg Isonen
    @kof
    @mbrevda @page is not implemented yet
    Evan Garrett
    @evang522

    @kof My concern in the post wasn't necessarily to make a defense of the merits of using class components over functional components, but rather to find out if it really ist the case that all react-jss support for them is being removed long term.

    But just shortly some of our reasoning for continuing to use Class based components:
    Examples for the purpose of tutorials and proof of concept make functional components seem like a viable path to move to as a 100% solution, but when you're working with applications that are built with very complex business logic, having a single render method (a functional component) becomes very messy. (Defining business logic inside a function that should only be concerned about layout, for example) The logical separation of Class components is a very good solution to this because it allows you to separate functionality for component mounting or unmounting into isolated methods.

    The idea of separating components into smaller components is in general a great idea, but it doesn't mean that doing so gets rid of the need for complex business logic in some places.

    Henri
    @HenriBeck

    If your functional components get too complex, you can move out hooks. Your business logic doesn’t need to be defined in your render method.

    Also hooks allow you to group the logic by it’s concern and not by Reacts concern.
    Meaning you can have all of the logic, including mount/unmount logic together and not have them separate.

    Evan Garrett
    @evang522

    @kof Dan Abramov suggested a viable solution that works well for us with class components on the same SO question:

    https://stackoverflow.com/questions/57675410/how-to-use-react-jss-within-react-class-components

    Thanks for all of your time.

    Evan Garrett
    @evang522

    @HenriBeck That is very true and generally up until a certain point in the past we did that, but we have adopted a more Object Oriented approach to React which has been extremely powerful in fostering a clean and modular codebase.
    Moving functions out of components makes sense when the logic is on a different layer of abstraction or responsibility than the component itself. For example, in a layout component, one would very likely make a fetch call to assemble all the data needed to display whatever it was the component's responsibility to display. Of course we wouldn't define all of this logic inside the component; we would place it in a controller class and simply call the fetchAndStoreOurAwesomeData method of the controller from within the component -- a one liner.

    But then you also need to define logic inside the component which decides when it is permissible to begin rendering the data -- i.e. a method that returns truthy for when certain conditions are met. This logic belongs to the layout itself, and in a functional component it must be written inside the function, which adds to the noise of the render method of the component. (and there are of course many other similar functionalities )

    When one has a class component, there is a clearly defined area to place this logic -- componentDidMount, componentDidUpdate, or self-defined methods which make it clear what's happening, and which render methods can call on a high level without going into details. Whereas in a functional component, it's all inside the same function. When you're trying to be very precise about where logic is defined, it begins to feel messy defining somewhat secondary logic inside a render method, but then you also begin to feel messy defining the logic outside of the component, because it technically belongs to the component itself.

    I realize these are largely organizational concerns, but these really do become a big deal in large code bases.

    Johann Lucas
    @johannlucas
    Hi! Can somebody help me with Material Design Styles?
    I'm trying to use nested classes on my root class
    but I don't know how to call the nested class on my div
    I have this: actionsContainer: {
    margin: '0 auto',
    maxWidth: '980px',
    marginTop: '60px',
    '& .empty': {
    textAlign: 'center',
    fontSize: '32px',
    color: '#999',
    fontWeight: 'bold',
    marginTop: '300px',
    },
    },
    and calling it like this: <div className={classes.actionsContainer.empty}>
    no success
    Adrian Pirela
    @adnfx2
    @johannlucas, I would call it this way:
    className={`${classes.actionsContainer} empty`}
    Adrian Pirela
    @adnfx2
    Let me know if that's what you're looking for!
    Johann Lucas
    @johannlucas
    Wow! Thanks a lot Adrian, I spent a lot of time searching for this solution today. It works perfectly.
    @adnfx2
    Moshe Brevda
    @mbrevda
    @kof I get that. The question is there some work around for now? Like perhaps the ability to add raw styles (which don't get parsed)?
    Oleg Isonen
    @kof
    I implemented @raw rule as part of this experiment: https://github.com/cssinjs/jss/pull/757/files#diff-39a5fe9ae095470b6dfbb41b202f1ce1R1
    So this kind of rule might have a place in general, but isn't there rn.
    mannegobot
    @mannegobot
    Hi All, I'm try to use react-jss but it can't resolve the createUseStyles? Anyone has same issue?
    Henri
    @HenriBeck
    what version of react-jss are you using? @mannegobot
    Si
    @Tatamethues
    hello, is there a api like withComponent in emotion or as prop in styled component?
    Henri
    @HenriBeck
    yes in the v10 alpha we have a styled interface @Tatamethues
    Si
    @Tatamethues
    I found it. Thanks @HenriBeck
    Mathieu Marques
    @angrybacon

    Hello :-) Is the following simply not supported?

    export default theme => ({
      root: ({ configuration }) => ({
        '@global': reset(theme),
        fontFamily: 'sans-serif',
        ...configuration.path.to.styles,
        [theme.breakpoints.down('xs')]: configuration.path.to.stylesMobile,
      }),
    });

    Versus the following (which works):

    export default theme => ({
      root: {
        '@global': reset(theme),
        fontFamily: 'sans-serif',
      },
    });
    Serafin Wesnidge
    @lumodon
    If my dynamic sizing is coming from React's useContext which doesn't change props of my components (whole purpose of useContext right?) how can I force createUseStyles to recalculate it's values when the context changes?
    Serafin Wesnidge
    @lumodon
    Apologies nevermind I found a pattern that suffices.
    // function OriginalModule...
    
    export default function StyledModule(...props) {
      const fluidProps = useContext(FluidContext)
      return OriginalModule({...props, ...fluidProps})
    }
    Oleg Isonen
    @kof
    @lumodon you are calling useStyles() with whatever you want, props, context, state
    Zimbo0397
    @Zimbo0397
    Hi all . Can i ask somebody to help me about jss library ?
    My question about the nested selectors between two or more independent components.
    Zimbo0397
    @Zimbo0397
    image.png
    This is example. My question is - how i can create nested selector like this? .MyButtonHolder > .MyButton {display: block}
    i have read this part of the documentation - https://cssinjs.org/jss-plugin-nested?v=v10.0.0-alpha.16
    Zimbo0397
    @Zimbo0397
    but i can`t find answer for my question. I will glad to receive your help thanks)
    Oleg Isonen
    @kof
    you should not style an element inside of a different component from a parent using nesting
    you can pass a class name to the child component and let it apply it to the element
    Zimbo0397
    @Zimbo0397
    Thank you so much. It looks like adequate solution. You save my time))
    Oleg Isonen
    @kof
    You are welcome, feel free to support us on opencollective https://opencollective.com/jss