Questions tagged [jss]

Use this tag for questions about JSS - A library for generating CSS from JavaScript.

Filter by
Sorted by
Tagged with
-3 votes
0 answers
27 views

Two carousels sharing an image [closed]

So i have two modals, each with it's own gallery and images. Whenever I open one and then the other modal, that second modal will display the last image selected from the previous gallery from other ...
Mezmerizer 9's user avatar
1 vote
0 answers
35 views

Sitecore NextJS Dynamic Placeholders

I need to dynamically generate 5, 10 or 15 placeholders. I have created a placeholder and given it the key: text-container-{*} I added this placeholder to my Rendering and set the Parameter Template ...
Anthony Fernandes's user avatar
0 votes
0 answers
16 views

jss nested camelCase classes are converted to kebab-case

I'm trying to force JSS to always use camelCase, including nested styles. So If I have these styles: jss.use(camelCase(), nested(), cssGlobal(), defaultUnit()); export const stylesObject = jss....
msqar's user avatar
  • 2,960
1 vote
0 answers
70 views

How to dynamically import a component in sitecore jss inside next js application?

I know the conventional way of dynamically importing a component : const Report = dynamic(() => import('PowerBIComponent'), { ssr: false, }); But since application uses [...path] to catch routes ...
Nishant's user avatar
  • 13
1 vote
0 answers
31 views

React-jss has a weird behavior for styles

i am using react-jss for apply styles to my component and when i was testing a component i encountered with a weird behavior this is what is returned from my component: return ( <div id={id} ...
hamid-beigi's user avatar
1 vote
0 answers
20 views

I am using CSS animations, when I load/reload component/page it jerks like it's moving from right to left, after that it works fine what to do

'@keyframes slideAnimationBackLarge': { '0%': { transform: 'translateX(15px)', opacity: 0 }, '100%': { transform: 'translateX(0)', opacity: 1 }, }, '& .iconTwo': { ...
Wasif Raza's user avatar
2 votes
0 answers
153 views

How to implement react-jss in next.js13 app directory

there is an example here but it's using the _document file which does`t exist in the next13 app directory EDIT: you can use css-in-js library called cxs, it doesnt need any configuration. just install ...
Yehuda Zvi's user avatar
2 votes
4 answers
259 views

remove jss prefix from production build

I am using react version 17 and we use webpack to bundle our deps. import React from "react"; import { Chip } from "@material-ui/core"; import { createGenerateClassName, ...
Tilak Raj's user avatar
  • 1,399
0 votes
0 answers
25 views

How to add additional classes that gets styling from separate CSS file?

I'm utilising both react-bootstrap and JSS which might not be the best idea. But it is what is. Right now I'm trying to apply both some of the Bootstrap classes while also applying styling using JSS. ...
user15227672's user avatar
0 votes
0 answers
21 views

Why is a random (distorted) image appearing as the background-image on a div element

I'm defining a React functional component to dynamically determine it's own background image using a windowID prop, like so return ( <div className={"taskbar-item"} onClick={...
Michael's user avatar
  • 33
1 vote
1 answer
126 views

How to add fading transition on a changing image?

I have this code: HTML <div id='features-buttons'> <button class='features-button' id='theButton' onclick='featureImage1()' type='button'><i class='fa fa-briefcase'/> Home Office&...
Riyandi Karlus's user avatar
0 votes
0 answers
106 views

use container query in react-tss

I'm trying to figure out if there is a way I can use container queries in react-tss. The docs don't mention anything about it or media queries for that matter. I was able to do something like the ...
yoshinator's user avatar
1 vote
1 answer
598 views

Why do tailwind breakpoints not work in this case with Next.js?

I have a component that should hide an element if the viewport is below the md breakpoint. It looks as follows: function HideUnderBreakpoint({ breakpoint, children, }: { breakpoint: "xs&...
Skeleton's user avatar
  • 107
0 votes
0 answers
129 views

How to setting React 18 SSR?

I have some questions about React 18. I updated my project from React 16 to 18, but I see only server-side html-markup without hydrate in client side. Is it correct use same App components in (client)...
What is Love's user avatar
0 votes
0 answers
23 views

How to pass a custom variable to styles file through 'withStyles'?

I'm trying to create a custom marquee component with a custom animation time prop, but i need to pass this prop to my styles file through withStyles function and i dont know how do it This is how i ...
Fer Alvarez's user avatar
0 votes
2 answers
143 views

css box-shadow not showing

I am facing an issue with css box-shadow.. At the company we use material ui and react base table from our own story book. My problem is that I am currently replacing react virtualized table with ...
David Kiss's user avatar
-1 votes
1 answer
31 views

Can someone help me to program a game menu in html?

I'm in the process of programming a game menu in html. However, I have no idea how best to do this. I have already watched many tutorials on Youtube etc. but none have worked so far. Maybe someone can ...
SPORT DIGITAL's user avatar
2 votes
0 answers
41 views

Building separate css for components in CRA app with SASS

Working on a new project setup, and trying to get figure out the configuration to get .scss files to build per component. Ideally, only the necessary css files would load per component added to a page,...
Matt's user avatar
  • 1,571
3 votes
0 answers
31 views

JSS - selector for all nested grand children elements

First of all, I realize what a basic question this is, and for sure it has been asked before, I just can not find an answer to it. Using JSS, I would like to have all the child elements, for example ...
Wilhelm Sorban's user avatar
0 votes
1 answer
35 views

Update JSS sheet on specific redux state subtree change

I am injecting JSS into a manually loaded iframe, and then launching a reload whenever certain values in my redux state change, as follows: export default function ETFStyleUpdater({ sheet, id }: Props)...
AntonOfTheWoods's user avatar
0 votes
1 answer
39 views

Site Navbar interact with Tableau iFrame

I have embedded a Tableau dashboard/worksheet into a website via iframe. I'm looking to build navigation from the parent site that directly interacts with the embedded dashboard so users can click ...
Tyler Anderson's user avatar
0 votes
4 answers
5k views

Rollup failed to resolve import "jss-plugin-{}"

I've been banging my head against this one for a while. I had my Vite ReactJS project building with no problems, and have not made significant changes. It runs fine on local, but when I use yarn build,...
Ryan Walter's user avatar
2 votes
1 answer
845 views

React and MUI - My clicking button animation isn't working like I wanted

I have this Button from MUIv5 and I would like to fully animate it once it's pressed. The problem is I have to hold the button to make the full animation and not just one simple click How can I fix it?...
SpicyyRiice's user avatar
0 votes
2 answers
548 views

Read barcode value for input type hidden

I want the input to receive the value read from a barcode being in type hidden. I have the following code: let $scannerInput = $(".scanner-input"); $(document).ready(function(){ $scannerInput....
Bruno's user avatar
  • 811
0 votes
2 answers
601 views

material v5 migration: migrate from JSS to Emotion

I'm trying to migrate my material-ui project from JSS to Emotion in order to support react18. I ran the npx @mui/codemod v5.0.0/jss-to-styled <path> command successfully. However, when I try to ...
chipimix's user avatar
  • 219
2 votes
1 answer
62 views

Trying to use CSS statements with function-like formatting in JSS but I get an error

I've been recently trying to use JSS in my React project. My code is of a button that requires the transformY() property as an animation when you hover but it isn't working. This is my code and the ...
pizzalawl's user avatar
1 vote
0 answers
52 views

Adding a @layer to injected CSS

I have a React app that uses Material-UI as a framework. I want to implement the @layer to my custom CSS files but for that, I need all the injected CSS from Material-UI to be also inside a 'third-...
Matan Sanbira's user avatar
1 vote
1 answer
269 views

How to change speed of a keyframe without it jumping

I am trying to change the speed of the keyframe by changing animationDuration. but everytime i change the animationDuration, the box that is animated changes positions(jumps). Is there any way to ...
Aggelos Kypraios's user avatar
1 vote
1 answer
449 views

How to target a nested class in a different sheet with JSS?

I'm not actually sure if i am using the proper terminology. Basically i would like to have a file with a component such as: //Foo.tsx const useStyles = createUseStyles({ foo:{ background:'red' ...
pailhead's user avatar
  • 5,221
10 votes
2 answers
8k views

What is the best way to use sx prop in MUI v5?

I have started using MUI v5 with makeStyles in my previous project. After deploying, I faced a huge delay in loading page's CSS. So I started searching that found out makeStyles is deprecated in MUI ...
Ali Fayazi's user avatar
1 vote
0 answers
67 views

HTML picture slider

im somewhat new to html, css or java script and so far i ran into a bit of a problem and wanted to ask for advice because watching youtube videos did not exactly solve the problem or im missing a ...
GFreenD's user avatar
  • 11
2 votes
1 answer
689 views

What causes the JSS error "<Hook />'s styles function doesn't rely on the "theme" argument"?

Unfortunately there are no helpful details when it comes to this error when I run my Jest tests: Warning: [JSS] <Hook />'s styles function doesn't rely on the "theme" argument. We ...
Felix Geenen's user avatar
  • 2,555
0 votes
1 answer
513 views

Sitecore JSS (Headless) + React. Can not deploy app. Status: 403

I am trying to deploy my first react app. I have followed all the steps according to the instructions. But when it comes to app deployment I keep getting the same message. Unexpected response from ...
KHTRE's user avatar
  • 21
0 votes
1 answer
1k views

react with JSS - how to add class to child component?

I have a wrapper component which handles animating the mounting and unmounting of my components, as well as passing on any other props from the parent. The wrapper adds class and toggleVisibility ...
Tangles's user avatar
  • 45
0 votes
0 answers
1k views

Custom stepper with progress bar material ui, react

I am working on a stepper and I am using the code from https://codesandbox.io/s/dazzling-beaver-45ky0?file=/src/CustomStepper.js Over here the progress between two steps is on click of next button, I ...
user avatar
0 votes
1 answer
309 views

Jquery: append creates multiple new elements in elements before when clicked

I'm creating a personal use website where I want to add "modules" or groups in which I can add links. The problem I'm facing is when I add a group and start adding links, it all works fine. ...
Arkiverat's user avatar
0 votes
1 answer
212 views

custom style rules on html and body tags with react jss, @global does not get applied

i am attempting to apply custom style rules to: all elements, html, and body tags using react jss, in a React TS library. when the component inspected in storybook the '@global' rules non present here ...
Peter Koller's user avatar
5 votes
0 answers
505 views

How do I replace dollar sign nested class selectors in MUI 5 for selectors without a global class name?

I've inherited a large MUI project and my first task with it is to migrate to MUI 5. The migration guide tells me to replace any state classes or nested classes that use the dollar sign ($) with the ...
Gisheri's user avatar
  • 1,655
0 votes
1 answer
517 views

MUI5 sx prop behavior

I'm playing with Material UI 5 sx props just out of curiosity and can't understand how to make it similar to the previous MUI 4 makeStyles fn. I'm trying to pass JSS classnemaes to sx props. So in ...
Anastasia Posmashna's user avatar
0 votes
1 answer
286 views

React jss overrides parent styles and retains child style

in using the jss lib in react with a custom theme that merges two themes together for use. Previously there was no problems but to type it correctly and create an ease of development, it was modified ...
Robolisk's user avatar
  • 1,722
0 votes
2 answers
763 views

MUI v5: How to generate style classes for interop with other libraries?

I am using MUI v5 together with Quill in React. I can pass a className prop to the ReactQuill component and change it's styling: const useStyles = makeStyles((theme) => ({ editor: { '& ....
Johnneh's user avatar
  • 267
0 votes
0 answers
709 views

'Login' cannot be used as a JSX component. Its return type 'void' is not a valid JSX element

I am creating a login form in react using Typescript. I have set props type as any. But i cannot import it into App file. It is returning error as 'Login' cannot be used as a JSX component. Its return ...
Nitesh Raj Khanal's user avatar
0 votes
1 answer
706 views

Typescript React; How to give type to JSS classes object

My react code: import React from 'react'; import withStyles from "react-jss"; const styles = { box: { border: "2px solid #000" } }; interface ...
Akshay K Nair's user avatar
0 votes
2 answers
408 views

is there anyway to access parent element using child element in jss

Hi i want to access the parent element from child element in JSS, can any one help on this Please <div className="parent"> this is parent <div className="child">this is ...
Manu Panduu's user avatar
5 votes
3 answers
9k views

Overriding MUI Chip deleteIcon color

I am trying to give custom color to deleteIcon of Chip component (MUI v5). As I can see, my styles are overridden by .css-inlzrk-MuiButtonBase-root-MuiChip-root .MuiChip-deleteIcon , but I could not ...
Kerem atam's user avatar
  • 2,457
1 vote
2 answers
2k views

How to align an svg next to text in react

I'm trying to align a Celcius sign SVG next to the temperature in the center of the parent div, but for some reason, I can't do it by using flexbox or block with vertical-align. I tried searching the ...
yevg555's user avatar
  • 25
2 votes
1 answer
3k views

Place text on Box Component of Material UI

I want the hover functionality to happen (UI) which is happening in this case: Desired UI Source: https://www.loewshotels.com/santa-monica Now since modifying background image styles is a bit ...
sandybox's user avatar
2 votes
1 answer
6k views

How to use MUI v5 makeStyles without ThemeProvider?

I have a styles.tsx file because I rather not put the styling in my components: //styles.tsx import {grey, purple} from '@mui/material/colors'; import {styled, Theme} from '@mui/material/styles'; ...
Peter Boomsma's user avatar
2 votes
1 answer
683 views

How to extends classes in material UI createStyles

import { createStyles, Theme } from '@material-ui/core/styles'; export default (theme: Theme) => { const { primary } = theme.palette; return createStyles({ test1: { ...
Mittal's user avatar
  • 21
2 votes
1 answer
2k views

Use calc() function in makeStyles

const useStyles = makeStyles((theme) => ({ dialog: { '& .MuiTextField-root': { margin: theme.spacing(1), } }, address: { width:"calc(24vw + 8px)" }, })); &...
will's user avatar
  • 239

1
2 3 4 5
10