cssinjs/Lobby

Space for user questions.

迈宇

@sixiakun

when@gloabl and $something is combin，it doesn't work

this is disappointing

Arthur Sahakyan

@ASahak

Hi everyone, I have a issue connected to styles are loaded after render component., It makes view breaking.

I see in the browser the site without any styles about 500ms

const AsideMenu = dynamic(() => import('Components/Dumb/AsideMenu').then( => .default), {ssr: true});

if I change the {ssr: false},

there arent any like that issues

Oleg Isonen

@kof

Hi everyone, we are moving discussions to https://github.com/cssinjs/jss/discussions please don't post here any more ❤️

Jorge Ramírez

@Shinkei

Hi Guys, I am trying to create a react library with jss, I want my components to use a certain font, how can I add this front in my project so all components can use it?

Jorge Ramírez

@Shinkei

I mean for normal project we would put the font in theindex.html but in my react library there is no index.html

Oleg Isonen

@kof

Hi everyone, we are moving discussions to https://github.com/cssinjs/jss/discussions please don't post here any more ❤️

RUPAK

@RUPAAK

hey, how can i set background attachment property fixed using jss?

雨化田

@jinrichardJIN

Md.Enamul Haq

@EnamulHaq

Jacob Bogers

@Jacob_Bogers_twitter

To generate a global animation name, you can use @global rule.

under this link in the doc https://cssinjs.org/jss-syntax/?v=v10.0.0#keyframes-animation

@global is some kind of jss thing ? if it is, why isnt it a link to the doc in question?

kazii

@kaziii

Arthur Sahakyan

@ASahak

Hello there

I have a issue, regarding to vue 3 transition routing

when I change the router via transition the previous page is loosen styles

is here anyone who is familiar with like that issue??

Ansh Saini

@ansh-les

Hey, I'm trying to create a component library using react-jss. I want to support server side rendering in my component library. I tried importing my library into a next.js project but the components are not rendering normally. There are errors in the console saying "cannot read 'supressHydrationWarning' of null." However, the same library is working fine in a create-react-app. Am I missing some configuration settings?

Ansh Saini

@ansh-les

Okay I figured it out. Basically the component I was importing was available while server side rendering but not while client-side rendering. Now, of course, how is this possible? It's the same import. Yes. That's what confused me too. So I went into the node_modules and deleted all the contents of the index.js file of my component library and realized that the client side could still import some things but others were undefined. A colleague pointed out that it looks like a cache issue. I then deleted the .next folder and re-installed the component library that I had created. It started working.

Ohfelix

@Ohfelix

Hello every one... someone can help me
whats wrong with that

import makeStyles from '@material-ui/core';

const useStyles = makeStyles ({
navbar : {
backgroundColor: '#203040',
'& a': {
color: '#ffffff',
marginLeft: 10,
},
},
main: {
minHeight:'80vh',
},
});

export default useStyles;

Arron

@arron-taylor

^^ it looks like you’re trying to use makeStyles incorrectly. makeStyles takes a function as its argument. so it should look like this:

useStyles = makeStyles(() => ({ navbar: {backgroundColor: “#203040”} })

actually missed a ) up there

Leandro Grillo

@leandrogrillo

guys, hello! :D

i'm building a lib using jss (and react) and my main application is builded with webpack. The lib is exporterted as esm.

the problema is that when i try to run my lib on the application with webpack, it says that need a appropriate loader. i tried https://github.com/cssinjs/jss-loader but i'm not sure if it will work

Leandro Grillo

@leandrogrillo

or just include the lib in babel loader

Carlos Chao Cortes

@gsi-chao

Hello guys, do you have an example project where what they propose in this article is implemented
https://cssinjs.org/csp/?v=v10.8.2

johanFdev

@johanFdev

Feel free to redirect me if I'm in the wrong here (completely new to this) But I do have a question. I am trying to setup Cypress tests for a website and want to test an element that keeps changing name - it looks something like this: [data-cy="1dce682f-d339-4188-a745-b60016e42254"] > .jss61. the end here, jss61 keeps changing the value, how do I point to this element in Cypress when it does so?

Jieyuan Wang

@gengengengengen

Hello! How to set the style of element ':focus-visible' in JSS? I tried '&:focus-visible' and '&:focusVisible' but didn't work :(

Byron Thanopoulos

@IcodeNet

Hello! I am trying to consume a component library that is using react-jss and I am getting the following error

TypeError: (0 , _jss.create) is not a function

This happens if I try to transform react-jss for jest using the transformIgnorePatterns
I have been fighting this for 2 days now reading everything online without any luck
Any help much appreciated

Oleg Isonen

@kof

Hi everyone, we are moving discussions to https://github.com/cssinjs/jss/discussions please don't post here any more

cjz9032

@cjz9032

https://jsperf.com/jss-vs-css/3
Any one know what happend to this perf page?

Joseph Chu

@ASimpleCodingHermit

So this is basically css in JS? sounds like fun

anons-coder

@anons-coder

How can we use :foucs in react-jss

Today Sprint

@today_sprint_twitter

how can i use this my site https://www.govtjobsapply.com/

anons-coder

@anons-coder

Yes offcourse you can use :foucs and :hover and nested css in react-jss,like this

for hover use '& : hover'

Fabio

@facesar

hi, do you can help me please, how can i to use jss in webpack or how to set up. i want to get style tablish in css or into the html dom

Outdated

@outdatedx

Can anyone help me with theme Provider?

I wanna pass down my themeprovider theme prop to my styles.ts file

d'jok

@Djok_Harry_twitter

Hi, made this as react-jss

navMenu: {
        backgroundColor: "#060b26",
        width: "250px",
        height: "100vh",
        display: "flex",
        justifyContent: "center",
        position: "fixed",
        top: "0",
        left: "-100%",
        transition: "850ms",
        "&.active": {
        left: "100%",
        transition: "350ms",
        },
    },

and I'm calling in react className= "navMenu active" but it doesn't work, any idea pls how to solve this?

ChenHaoYin

@haoyinag

i get a problem from using MUIv4.x & qiankun

_proto.insertRule = function insertRule(rule, index, nativeParent) {
if (nativeParent === void 0) {
nativeParent = this.element.sheet // this will be nukll
// if(this.element.sheet){
// nativeParent = this.element.sheet
// cacheElement = this.element.sheet
// }else{
// nativeParent = cacheElement;
// }
}

  _proto.insertRule = function insertRule(rule, index, nativeParent) {
    if (nativeParent === void 0) { 
      nativeParent = this.element.sheet // this will be nukll
      // if(this.element.sheet){ 
      //   nativeParent = this.element.sheet 
      //   ___cacheElement = this.element.sheet
      // }else{
      //   nativeParent =   ___cacheElement;
      // }
    }

is there somebody who can help ~

Where communities thrive

People

Repo info

Activity