Stack Overflow
Stack Overflow

Questions tagged [jss]

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

JSS

A library for generating CSS from JavaScript.

Introduction

JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, server-side or at build time in Node.

JSS is framework agnostic. It consists of multiple packages: the core, plugins, framework integrations and others.

Links

Site: http://cssinjs.org/

Github: https://github.com/cssinjs/jss

494 questions
-1
votes
1 answer

How does this CSS converts into JSS?

I'm trying to get a specific class to change styles when its parent class gets hovered, in CSS it'd be this: .App:hover customButton { background: black; } I've tried doing this in JSS but with no success: export const appStyles =…
Yurdesou
  • 179
  • 1
  • 2
  • 6
-1
votes
1 answer

Adjust Label in TextField Material UI

How can i adjust the label of the TextField and there's a gray background color appearing after i select an item in Material UI? Pls check this codesandbox CLICK HERE Label Problem Grey Background Color Appearing
Joseph
  • 7,042
  • 23
  • 83
  • 181
-1
votes
2 answers

Nested Menu Item in React

I have a problem in displaying the values from the TextField in my React app. I'm using material UI and material-ui-phone-number as its packages. As you can see, the values after i click the flag, it is displaying on the back. I believe this is on…
Joseph
  • 7,042
  • 23
  • 83
  • 181
-1
votes
2 answers

Horizontal Line in ReactJS

I have a login page that has two login buttons. One for regular login and the other for login with google. I'm trying to achieve a style with horizontal line with the "OR" word. Something in the picture attached. My problem how can i put the lines…
Joseph
  • 7,042
  • 23
  • 83
  • 181
-1
votes
1 answer

Multiple style extend on reactjss not working

I am using the array to have multiple extend on react-jss, but it dosent work. const styles = (theme) => ({ flexDisplay: { display: 'flex', 'align-items': 'center' }, headerBackground: { 'background-color':…
Prashant Sharma
  • 114
  • 6
-1
votes
1 answer

Centering social media icons underneath Avatar component

I'm trying to align my social media icons underneath the Avatar component. I have tried centering it with all the ways I know how as you can see in the JSS. I've also tried it without targeting the social media icons with JSS, for the rest of the…
Benjamin-wofford
  • 131
  • 1
  • 11
-1
votes
1 answer

How to tell CSS to 'use next most specific rule to determine this property'

I'm using Material-UI and JSS to manage my CSS, and I've run into an issue where the styles differ between development and production. The reason this appears to be - is that the order of the rules in file must be different. ie. for an element
dwjohnston
  • 11,163
  • 32
  • 99
  • 194
-1
votes
1 answer

jss syles for the dropdown for react

I am trying to style my place holder instead of using css I am using JSS. so I googled and found this link Styling the placeholder in a TextField I tried with !important too but its not working. can you tell me how to fix it. providing my code…
user12496915
-1
votes
1 answer

How to reference a local rule within the same style sheet JSS

How I can fix it ? '&:focus':{ '&:hover':{ borderColor: colors.electro }, `&~${ classes.error }`:{ display: 'none' }, } How would I do the equivalent of classes.error?
Vladimir Golub
  • 523
  • 1
  • 8
  • 22
-1
votes
1 answer

How do I test a component method when using react-jss and enzyme?

I have basically this question: https://github.com/airbnb/enzyme/issues/208 But my component is wrapped in the jss withStyles wrapper. I'm using the shallow method created by Material-UI as outlined here. eg: class Button extends React.Component…
dwjohnston
  • 11,163
  • 32
  • 99
  • 194
-1
votes
2 answers

How to get an object properties value while next property is being initialized?

While I was trying JSS I need to do something like this: sampleStyle: { width: "50px", height: this.width } I have tried several things to work around that problem but none of them satisfy my needs. The closest one I came up with: var rect =…
suchcodemuchwow
  • 848
  • 2
  • 9
  • 27
-1
votes
2 answers

I'm converting existing SCSS code to JSS, I'm stuck at converting the following nested classes

I'm attaching the code for SCSS and react elements below .chatPane { height: 100%; overflow: hidden; .form-control, .form-control:focus, .form-control:active { border-bottom: 0; } } render() { const { isLoaded, messages,…
Abhinav
  • 9
-2
votes
2 answers

How can I change the colour of a MUI LinearProgress component?

I have the following code and I would like to change the colour of the progress bar. I'm unable to figure out what I'm doing wrong. import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import LinearProgress from…
user13707522
  • 11
  • 1
  • 1
-3
votes
2 answers

How do I force a refresh on click on php?

I have two buttons in html which are back and next. If i click those buttons a variable gets incremented or decremented. This variable is getting sent to a function.php where there is an sql statement. The statement is: select * from x where…
Arti
  • 1
  • 5
1 2 3
…
32
33