Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Vladimir Varbanov
    @vladyn
    Hi @pip8786 - about your first question - yes - you can have as many you want. I'm using such an approach in my current project. About the second - I'm not sure I understand it clearly, but to the createStyle function, you pass arguments from the props of the component as well. Probably is not exactly what you're asking, but you can clarify...
    Philippe Sabourin
    @pip8786
    @vladyn Hey, thanks for looking. I'm talking about in typescript specifically, it gives me errors for the first case if the properties don't override each other. That's very problematic for cases where I wouldn't otherwise have the same properties for different media queries. Right now my solution is to use @ts-ignore.
    For the second question, again in typescript, i know you can pass props to it and it works fine, but in MaterialUI (which relies on ReactJSS but wraps it) they allowed you to 'type' the props to ensure people using it would pass in the right parameters.
    I haven't found a way to do that in with just React-jss
    Vladimir Varbanov
    @vladyn
    I see @pip8786 you're talking about using it with types, where I have no experience, unfortunately. I playing with JSS and Vanilla JS is everything we've done so far as providers and factories extracting the compiled CSS
    Philippe Sabourin
    @pip8786
    Ah, thanks anyways. If I find a good workaround for either I'll post it here or raise an issue.
    Chiel Kunkels
    @chiel

    hey all, I'm using react-jss with typescript and I am struggling with an issue where I cannot define multiple font-faces, I get this error:

          TS2322: Type '{ fontFamily: string; fontWeight: number; src: string; }[]' is not assignable to type 'string | JssStyle | Func<string | JssStyle | null | undefined>'.
      Type '{ fontFamily: string; fontWeight: number; src: string; }[]' is not assignable to type 'JssStyle'.
        Index signature is missing in type '{ fontFamily: string; fontWeight: number; src: string; }[]'.

    The problem seems to be that I cannot declare the @font-face rule as an array. Without using an array it's fine:

    const useStyles = createUseStyles({
      '@font-face': {
        fontFamily: 'Milo',
        fontWeight: 300,
        src: [
          'url(./assets/fonts/MiloOT-Light.woff) format("woff")',
          'url(./assets/fonts/MiloOT-Light.woff2) format("woff2")',
        ],
      },
    });

    but if I use the array syntax (cause I want to define multiple fontWeights), it goes wrong:

      '@font-face': [
        {
          fontFamily: 'Milo',
          fontWeight: 300,
          src: [
            'url(https://stylabilla-static-assets.usabilla.com/assets/fonts/MiloOT-Light.woff) format("woff")',
            'url(https://stylabilla-static-assets.usabilla.com/assets/fonts/MiloOT-Light.woff2) format("woff2")',
          ],
        },
      ],
    I guess it may have to do with this definition: https://github.com/cssinjs/jss/blob/master/packages/jss/src/index.d.ts#L18-L21, perhaps it also needs to suppose JssStyle[]?
    Nick Aspinall
    @nijk
    Does anyone know if it is possible to use jss-plugin-isolate with SSR?
    RobertAron
    @RobertAron

    Hi! I was thinking about contributing to the project but I'm running into issues just building it. I'm getting this error when trying the build:

    (plugin size-snapshot) Error: ModuleNotFoundError: Module not found: Error: Can't resolve './Jss.js' in '/'

    I tried removing the size-snapshot plugin from rollup, but it runs into import errors a little further into the build. Does this sound familiar to anyone or is this something weird? I'm on windows if that makes a difference.

    Oleg Isonen
    @kof
    how did you install it?
    RobertAron
    @RobertAron
    I cloned the repo, ran yarn, then yarn build
    yarn version 1.15.2
    Oleg Isonen
    @kof
    I don't get it, there must be something specific to your machine
    RobertAron
    @RobertAron
    ok, I must have something installed weird. Thanks for checking for me!
    Arif Uddin
    @Arif-un
    I want to convert css-to-jss-to-css, Is that possible in jss ?
    ranst91-u
    @ranst91-u
    Hey there,
    Just starting with react-jss and after installing and importing into my component using import { createUseStyles } from 'react-jss' I'm getting this warning export 'getDynamicStyles' was not found in 'jss'
    Which leads to the error Object(...) is not a function in my storybook.
    Anyone knows what might be the issue?
    1 reply
    Ansel Bobrow
    @anselbobrow
    hey all, I'm using the material-ui style API in react, and noticed it wasn't adding vendor prefixes to my textAlign: "justify-all", rule. do I have to add the jss-plugin-vendor-prefixer manually to my project for this to work?
    Vignesh Elangovan
    @devevignesh
    hey is it possible to change body background color to each page instead of setting it globally
    George W Langham
    @GeorgeWL
    heya, question, I want to select the child of something, how would i do that?
    just wanting that if class is X, it applies css to itself, and to the child
    I tried this:
     listStyleCheck: {
        listStyle: 'none',
        'li:before': {
          content: '✔'
        }
      },
    to no avail
    Xavyr
    @Xavyr
    hello all
    quick question here; has anybody ever imported react-jss as `import injectSheet from react-jss'?? (not plural)?
    1 reply
    Florian Müller
    @devbucket
    Hello everyone. I have a question. I was trying to implement the jss-plugin-expand to be able to write rules like padding: [5, 0, 0, 6]. But for some reason, it compiles to padding: 5px, 0, 0, 6px which is invalid syntax. Can someone here help me? Do I need to setup something special?
    undefined ❌
    @iGontarev_twitter
    hi everyone! help me pls, have this error export 'getDynamicStyles' was not found in 'jss', Object(...) is not a function, work stopped
    kuntur-studio
    @kuntur-studio
    Hello everyone! Does anyone knows if it's possible and how can I use the @supports rule?
    Philippe Sabourin
    @pip8786
    Is there a way to use props or dynamic styles of some sort in a @global style?
    I've tried several different ways but it doesn't seem to work as soon as I start using props.
    Philippe Sabourin
    @pip8786
    Nvm, i ended up going with this:
    useLayoutEffect(()=>{
            document.body.style.overflow = !isLarge && expanded ? "hidden" : "visible";
        }, [isLarge, expanded]);
    MinHeinKhant
    @MinHeinKhant

    .copy, .copy-2 { background: 'black' }

    How can i write styles that share a certain style for two classes?
    For example
    const styles = {
    copy: {
    background: 'black'
    },
    }

    const styles = {
      copy: {
        background: 'black'
      },
    'copy-2': {
      background: 'black'
    },
    }
    Arnur-K
    @Arnur-K
    Hi! Can I use pseudo elements (::before, ::after) in CSS-in-JS ?
    serializedowen
    @serializedowen
    anyway to pass props to animation attributes?
      root: {
          // animation: "$ripple 1.2s infinite ease-in-out",
        animation: (props: StatusBadgeProps) => {
          if (props.status === "online") return "$ripple 1.2s infinite ease-in-out";
          else return "";
        },
    }
    the first one works but the second one doesnt

    Hi! Can I use pseudo elements (::before, ::after) in CSS-in-JS ?

    yes you can

    Casey_1991
    @casey1991
    截屏2020-09-11 下午11.16.55.png
    help~
    when use function throw not link issue:
    Warning: [JSS] Rule is not linked. Missing sheet option "link: true".
    Alison Lee
    @alee8
    Screen Shot 2020-09-17 at 9.17.45 PM.png
    Hi, I just started using React-JSS scaffolded with create-react-app, React-JSS, and storybook. I created media queries for different breakpoints (4 in total ranging from min-width of 576px to 1200px) in the UI. I attached them to a top-level div. On rendering in a browser window that is 1320px wide, the rule that is picked is the smallest one 576px as shown in this devtools screen shot. I have the same scss media query and the right media query (largest - 1200px) is selected. What would I be doing wrong?
    Alison Lee
    @alee8
    nvm, I figured out that it was my sequence of my media query: should go from small to large and I had gone from large to small. As previously noted, the generated CSS is just CSS and nothing due to react-jss.
    Supah
    @supahfunk
    Does it exist a babel plugin to prepend or append component's name to JSS class? Because with hot-reload, components JSS hashes are changing with the same name of other components, mixing their CSS styles.
    aseelban
    @aseelban__twitter
    hi
    I use JSS on separate file and I got this error TypeError: Object(...) is not a function
    Carl Cronsioe
    @Carlcro

    Hi

    I upgraded react-jss from 8.6.0 to 10.4.0. I have a CssBaseline from material-ui use that takes prop htmlFontSize, I get that data from a url parameter. After i upgraded, that does not work anymore. Anyone know why?

    Rohan Orton
    @rohanorton

    Hi there,

    I'm trying figure out a way of getting CSP to work with JSS on a statically hosted site.

    Adding Nonce
    The official solutions to this is to inject a nonce at request time, but we don't have that ability do that as the assets are currently served as static files via AWS Amplify. We could possibly change this to use AWS Cloudfront directly and insert a Lambda@Edge to add the nonce, but would prefer not to if it's at all possible to do another way as the site is already up and running in Amplify

    Adding Hashes
    I have tried manually adding hashes to my CSP allowed styles list, but the hashes change too regularly for this to work at all.

    Extracting to Files
    I've seen that there is an old extract-jss-webpack-plugin that looks like it works for Webpack 2 which made me wonder: is there is any way of extracting the JSS to CSS files at build time using Webpack 4? Or is it possible to do something at compile time using server-side rendering to at least insert all the script tags into the page?

    ingrown potato
    @ingrown_gitlab
    Hello, I'm trying to figure out a way to use javascript as a ui for a c++ project. I believe I can use React with Googles v8 engine to handle the html inside of a jsx file. My question is, can I use JSS for styling? V8 will only handle pure javascript (no html or css) and I'm wondering if JSS is the right tool for what I would like to accomplish. Thank you! :)
    Bridger Reif Hammond
    @standin_gitlab
    Hello, looks like the Performance links have gone down on the site.