Questions tagged [jss]
Use this tag for questions about JSS - A library for generating CSS from JavaScript.
494
questions
-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 ...
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 ...
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....
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 ...
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} ...
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': {
...
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 ...
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,
...
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.
...
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={...
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&...
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 ...
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&...
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)...
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 ...
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 ...
-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 ...
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,...
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 ...
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)...
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 ...
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,...
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?...
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....
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 ...
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 ...
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-...
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 ...
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'
...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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. ...
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 ...
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 ...
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 ...
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 ...
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: {
'& ....
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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';
...
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: {
...
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)"
},
}));
&...