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
0
votes
0 answers

How to position Dropdown content behind dropdown button using css

How to position Dropdown content behind dropdown button using react jss . I tried using {position: absolute; z-index: 2} for the button and {position:absoulute; zindex:1} for the dropdown content. but it doesn't work.
0
votes
1 answer

Animate switching grid sizing

I have a project with React and Material UI. I need some guidance on how to animate a grid item size change. The item is by default sm={3}, when the user hovers the item, this changes to sm={6}. Here is my code:
carloscc
  • 779
  • 3
  • 14
  • 20
0
votes
1 answer

How do I override compiled classes?

I cam trying to apply override styles to a compiled class name. my compiled code is like...
I want to be able to target that specific item like this const styles = () => { MultiListItemText-root-262: {…
Christopher Mellor
  • 470
  • 2
  • 9
  • 23
0
votes
1 answer

CSS In JS vs Shadow DOM

Webcomponents use the shadow dom for style encapsulation . From the specifications you know that the styles inside the shadow root are locally scoped . What would be the effect on memory when you instantiate the same webcomponent multiple times ? Ex…
charan
  • 71
  • 6
0
votes
2 answers

How to provide solutions to both React and non-React consumers?

I am developing a reusable set of UI React components using JSS, which are available in both ES5/ES6 modules. Is there a generator or pre-processor that can transform React/JSX into raw HTML and JSS into CSS?
0
votes
1 answer

What is the type of the component returned from withStyles()?

I have a Dictionary component with very simple properties: interface DictionaryProps { word: string; } In the props of another component I request a generic component which only needs a string word: dictionary: React.ComponentClass<{ word: string…
Al.G.
  • 4,327
  • 6
  • 31
  • 56
0
votes
1 answer

Snippets: Detect if a snippet prefix is used in a string or regular javascript

I want to build a tool to help me do stuff faster in my project. For that, I want to use the snippet functionality. Is it possible to know if a snippet prefix was used in string quotes or regular javascript code so for example: 'prefix + tab' (with…
Darko
  • 39
  • 1
  • 6
0
votes
2 answers

Can't get :hover or any pseudo-classes to work in react + material UI

I've gotten all other styling objects to work but for some reason pseudo-classes don't seem to render or they throw an error I'm using the jss-preset-default settings. Below the jssTest component is a commented sample of the different combinations…
George
  • 1
  • 2
0
votes
1 answer

How do you affect the padding on the MuiCardActrions component

I am trying to target the "root" class for the MuiCardActions component with a theme custom-variables override. Here is my JSS: overrides: { MuiCardActions: { root: { display: 'flex', justifyContent: 'flex-end', padding: 0 …
sdc
  • 2,603
  • 1
  • 27
  • 40
0
votes
1 answer

JSS interrogations

I am using CSS in JS (JSS) with material-ui, it works fine, but i don't get what it's supposed to offer (more than style injection) in terms of features/coding facilities. I feel like i am missing something so i have some specific questions. With…
Ludo
  • 5,060
  • 15
  • 53
  • 85
0
votes
1 answer

react-jss does not cache css classes

I use Mui (material ui) List and in the ListItem I have a custom component that's a bit complex (has other components + states, can collapse or expand, etc.). I use react-jss (injectSheet(styles)(component)), and I see that for every element that I…
user3053247
0
votes
1 answer

How to execute and merge multiple functions result by using Lodash

Suppose that we have 2 different functions (or more) which accept an one argument from some executor and return the result object. Let me show in an example: const style_1 = theme => ({ header : { color : theme.primary } }) const…
Velidan
  • 5,526
  • 10
  • 48
  • 86
0
votes
0 answers

Using .jss without a library

I'm trying to use jss (or any "css in js" library) library without React and without compiling it in node (i'm using a visual studio project). I've found the jss.js file but without any plugin, it's almost impossible to use. Is there any way to do…
marco burrometo
  • 1,055
  • 3
  • 16
  • 33
0
votes
2 answers

How works browser caching for index.html on a single page application

And injecting all the design on the head like JSS does, it has some benefit on performance?
B. Henao
  • 1
  • 2
0
votes
1 answer

Why are the react-jss style functions not executing on mobx store update?

I am using mobx-react, in conjunction with react-jss library for styling. The issue that I am facing is that the store updates are not causing the functions in the style definition to execute with the new props The exact scenario can be replicated…