Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
    Philippe Sabourin
    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
    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
    Ah, thanks anyways. If I find a good workaround for either I'll post it here or raise an issue.
    Chiel Kunkels

    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
    Does anyone know if it is possible to use jss-plugin-isolate with SSR?

    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
    how did you install it?
    I cloned the repo, ran yarn, then yarn build
    yarn version 1.15.2
    Oleg Isonen
    I don't get it, there must be something specific to your machine
    ok, I must have something installed weird. Thanks for checking for me!
    Arif Uddin
    I want to convert css-to-jss-to-css, Is that possible in jss ?
    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
    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
    hey is it possible to change body background color to each page instead of setting it globally
    George W Langham
    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
    hello all
    quick question here; has anybody ever imported react-jss as `import injectSheet from react-jss'?? (not plural)?
    1 reply
    Florian Müller
    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 ❌
    hi everyone! help me pls, have this error export 'getDynamicStyles' was not found in 'jss', Object(...) is not a function, work stopped
    Hello everyone! Does anyone knows if it's possible and how can I use the @supports rule?
    Philippe Sabourin
    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
    Nvm, i ended up going with this:
            document.body.style.overflow = !isLarge && expanded ? "hidden" : "visible";
        }, [isLarge, expanded]);

    .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'
    Hi! Can I use pseudo elements (::before, ::after) in CSS-in-JS ?
    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

    截屏2020-09-11 下午11.16.55.png
    when use function throw not link issue:
    Warning: [JSS] Rule is not linked. Missing sheet option "link: true".
    Alison Lee
    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
    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.
    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.
    I use JSS on separate file and I got this error TypeError: Object(...) is not a function
    Carl Cronsioe


    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

    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
    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
    Hello, looks like the Performance links have gone down on the site.
    Pradyumna Ghose
    Hi there!
    How do I make the class names deterministic?