Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Bridger Reif Hammond
    @reifnotreef
    Is this as gross as I think it is?
        '@media (max-width: 1599px)': {
          flexDirection: (showFilters: boolean) => showFilters === false && 'row',
        },
        '@media (min-width: 1600px)': {
          flexDirection: 'row',
        },
    Tobi
    @TkinterinShanghai
    when using my theme with useTheme() in another file I dont get any code completion. Is this to be expected?
    Bridger Reif Hammond
    @reifnotreef
    @TkinterinShanghai Are you passing the theme in to useStyles(theme)?
    And if you're using TS assign the theme a type in the createUseStyles((theme: ThemeType) => ({})
    Side question for anyone to answer:
    If I am using Material-ui for some components, is it worth it to use react-jss, or should I just rely on Material-ui's makeStyle?
    Bridger Reif Hammond
    @reifnotreef

    @kof Is there any performance advantage/disadvantage for calling createUseStyles() inside of a component rather than before it?

    I would assume that would cause it to recalculate on each render but it allows accessing props directly without having to explicitly pass them to your useStyles() hook.

    Oleg Isonen
    @kof
    don't do it, hook creator needs to be outside of component
    passing props to useStyles(props) was the intended api
    Ladislav Gazo
    @lgazo
    hi, how is it possible to use double pseudo classes in CSSinJS? Something like :before:hover?
    MarcoImoo
    @MarcoImoo
    Hi there! I have a react app with material-ui in a wrapper. How do I make the jss class names don't go into conflict?
    1 reply
    Leidy Patricia Garzón Rodriguez
    @lpgarzonr
    Hello, Does anyone know of a way to use the scss variables within react-jss createUseStyles? I have a company shared file variables.scss
    I used to import it and use the variables in my scss files component.scss file by doing @import '../../../node_modules/company/variables' now I want to use react-jss and obviously i can not import the scss file in my component.tsx
    Bridger Reif Hammond
    @reifnotreef

    @lpgarzonr When we made the change from scss to react-jss I created a file that we now put all of our variables in. Just standard js objects, or typescripts enums, and import what I need.
    ie:

    export const colors: {
      primaryBlue: #xxxxxx
    }

    And then in my component I import colors like a normal js variable.

    2 replies
    Piotr Pupczyk
    @ppsirius
    Hello
    How I can convert styles.js to css file?
    When I try jss convert source.js -f css > source.css I get
    ReferenceError: style is not defined
    :/
    Ahmed Musallam
    @ahmed-musallam

    Hi all,

    I've written this plugin:

    
    import type { Plugin, Rule, StyleSheet } from "jss";
    const PARENT_SELECTOR = "#my-global-selector";
    
    const plugin: Plugin = {
      onProcessRule: function (rule: Rule, sheet?: StyleSheet) {
        var parent = rule.options.parent as Rule;
        const cssRule = (rule as unknown) as CSSStyleRule;
        const ignore =
          rule.type !== "style" ||
          (parent && parent.type === "keyframes") ||
          !cssRule.selectorText ||
          cssRule.selectorText.includes(PARENT_SELECTOR);
        if (!ignore) {
          cssRule.selectorText = `${PARENT_SELECTOR} ${cssRule.selectorText}`;
        }
      },
    };
    
    export default plugin;

    The goal is to add #my-global-selector as the parent selector for every single generated rule.

    I am running into issues where one rule can have the selecor multiple times, is there a better way to write this?

    it works for 99% of styles, but I see edge cases, any help is appreciated. FYI: above is in TS
    Ahmed Musallam
    @ahmed-musallam
    also, I found this: https://github.com/iamstarkov/jss-increase-specificity
    gets the job done, but I'd rather use my ID for readability
    Alexey Bratushka
    @quarryman
    hello guys.
    Can someone advise if JSS has version that supports both HOCS and hooks just like React introducing hooks and supporting old classes for backward compatibility?
    If no, iis there a way to leave existing codebase as is when you want to use jss hooks?
    Alexey Bratushka
    @quarryman
    define dart theme and reassign colors in it, if generally asked
    Alexey Bratushka
    @quarryman
    so what is your question? dark theme colors should be defined specifically to your setup.
    Metin Kahveci
    @KMetn_twitter
    hi
    I want to change backgroundcolor of the button in run time by using createUseStyles
    What I need to do ?
    Achyut Kumar Panda
    @Sloth-Panda
    Hello, can I Join this org on github?
    Oleg Dutchenko
    @dutchenkoOleg
    Hello everyone. I was looking for the ability to sort media queries but never found it. And therefore wrote my own plugin. It works, everything is great. But I don't really like the implementation.
    I have not worked with JSS API before. Unfortunately, I have not found a more correct method of influencing the sorting of the list of rules than how to modify the RuleList::toString() method.
    That is a wrong way from the architecture OOP principles, but it is the most non-breaking way for the whole JSS workflow.
    After calling .toString() method JSS work is done and in this point I can make own job with sorting, combining and returning CSS output.
    Can anyone share experience or advice on how it could be done differently?
    I have published as the package on the npm. And the sources on GitHub repo
    Luis Sardon
    @luissardon

    Hello, I'm having a problem with MUI and jss, for some reason style content is getting removed after function values execution, this doesn't have an impact on the UI, but the DOM reference for the styles get lost.

    For instance two classes get generated jss1 and jss2, but only jss1 actually exist in the DOM while inspecting, but there is no reference for jss2 anywhere.

    Any idea why is this happening?

    Oleg Dutchenko
    @dutchenkoOleg
    I am faced with same behaviour, when used async ts checking
    Luis Sardon
    @luissardon
    any workaround?
    Adediran Adeola
    @adexdsamson
    Is there a way i can target label when input is. focused?
    Lenient
    @lenient
    What is the syntax of transform: rotate(90deg) in JSS?

    What is the syntax of transform: rotate(90deg) in JSS?

    I found it in the thread, that is transfrom: 'rotate(90deg)'

    andrescuco
    @andrescuco
    Anyone has found a good way to have jss styles in a snapshot test? I've found a couple of issues on github but none seem to have found a solution. styled-components and emotion have nice ways to get your styles in a snapshot
    Alexey Bratushka
    @quarryman
    the same issue here, still no way to use shallow for compoonent wrapped into JSS with theme
    Mostafa Javaheripour
    @mosijava
    hey,
    I wanted to read and know about the performance of jss.
    http://jsperf.com/jss-vs-css/3
    this link (from /performance page on site) keep giving me 500 error
    can anyone give me a link about it or give me anything that could help me?
    thanks alot
    Danijel Demirovic
    @Cucak_gitlab
    guys how to write this css with react-jss
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    lysdexic
    @lysdexic__twitter

    hey folks - trying to figureout how to wrap min() and calc() together - seems like there's something wrong with the comma - can you see what I'm missing?

    ".footer": {
    ....
    left:[["min(calc((100vw", "-", "1200px)/2)"], "0)"],
    ....
    }

    Oleg Dutchenko
    @dutchenkoOleg
    guys how to write this css with react-jss
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    {
        transition: 'color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out'
    }
    @lysdexic__twitter why such a complex structure? it can be much easier
    {
        left: 'min(calc(100vw - 1200px) / 2, 0)'
    }
    Daniel Shneyder
    @archcorsair
    Hey all, is there a way to define multiple classes simultaneously using JSS?
    I'm trying to achieve this behavior:
    .class1, .class2 {
      // values
    }
    Is it simply?
    '.class1, .class2': {
      // values
    }
    Bridger Reif Hammond
    @reifnotreef

    Quick question if anyone has an opinion about this I'd love to hear it.
    We're currently using Material-UI throughout our app. About 8 months ago I started using react-jss to handle our styling(before it was purely css/sass).

    Given the fact that we're using Material-UI is it worth using react-jss, and createUseStyles, over using Mui's makeStyles?

    5 replies
    Oleg Dutchenko
    @dutchenkoOleg

    Hey all, is there a way to define multiple classes simultaneously using JSS?
    I'm trying to achieve this behavior:

    .class1, .class2 {
      // values
    }

    yes must work

    Bridger Reif Hammond
    @reifnotreef

    Hey all, is there a way to define multiple classes simultaneously using JSS?
    I'm trying to achieve this behavior:

    .class1, .class2 {
      // values
    }

    Hey Daniel, yes you can do that!
    https://cssinjs.org/react-jss/?v=v10.6.0#basic
    That shows a simple usage of it. But you can target classnames like that as well.
    Example code:

      blueButton: {
        color: 'blue',
      },
      redButton: {
        extend: 'button',
        background: 'linear-gradient(to right, red 0%, green 100%)',
        '& blueButton': {
          color: 'purple !important',
        },
      },
    Oleg Isonen
    @kof
    Hi everyone, we are moving discussions to https://github.com/cssinjs/jss/discussions please don't post here any more ❤️
    迈宇
    @sixiakun
    when@gloabl and $something is combin,it doesn't work
    this is disappointing