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
11
votes
1 answer

How to write multiple CSS Properties on JSS-format?

I want to make some workaround for my current work that requires this to implement in order to get the right results on iOS 9.3 and its predecessors. It requires this line of CSS to be fixed: .wrapping-element { display: -webkit-box; display:…
Adith Widya Pradipta
  • 131
  • 1
  • 5
11
votes
3 answers

How to style input tag without class with JSS

I am using the react-select component on my app. I am also only styling my app with JSS. My issue is that since react-select is an npm package, I don't have the capability to modify class names in the component. So there is an input in there that I…
Brady Edgar
  • 486
  • 7
  • 27
10
votes
2 answers

How would I apply Material-UI managed styles to non-material-ui, non-react elements?

I have an application where I'm using Material UI and its theme provider (using JSS). I'm now incorporating fullcalendar-react, which isn't really a fully fledged React library - it's just a thin React component wrapper around the original…
dwjohnston
  • 11,163
  • 32
  • 99
  • 194
10
votes
2 answers

Can't declare keyframe within withStyles HOC (container.addRule(...).addRule is not a function)

So I got the latest versions of jss and material ui. Im using withStyles HOC and dynamically changing css in styles object, but I cant seem to be able to declare keyframes in css. Im also using nextjs if that makes any difference. Ive looked at how…
janat08
  • 1,725
  • 2
  • 16
  • 27
10
votes
4 answers

How to mount styles inside shadow root using cssinjs/jss

I'm trying to use https://material-ui.com/ components inside shadow dom, and need a way to inject those styles inside shadow dom. by default material-ui, which uses jss under the hood injects styles in the head of the page. Is that even possible?…
bboydflo
  • 907
  • 1
  • 15
  • 24
10
votes
2 answers

How to reuse the same style rule with multiple selectors

I want this using jss styling. .a{ height: 20px; } .b{ height: 40px; } .a,.b{ width: 100px; } Try 1 Make a rule c and add the class to both a and b c: { width: '100px' } Try 2 Make a object common and merge them to both a and b rule const common =…
Slim Shady
  • 1,045
  • 2
  • 12
  • 38
9
votes
1 answer

How to convert CSS with properties to MaterialUI Styles in ReactJS

I have the following CSS: [contentEditable=true]:empty:not(:focus):before{ content:attr(data-text) } which allows to show a placeholder inside a content-editable div when it has no content. I am using Material-UI Styles, so I need something…
JuMoGar
  • 1,740
  • 2
  • 19
  • 46
9
votes
2 answers

Simple selector and nested selector in JSS

I'm currently training on ReactJS. I'm using material-ui and JSS (totally new for me). I don't understand how can I simply select my H6 element or my H6 children elements (dangerStyle). Any idea ? Thanks ! myJss.js const myJss = theme => ({ …
stoomm
  • 171
  • 1
  • 1
  • 6
9
votes
2 answers

Material-ui style dialog / modal backdrop

How do I go about styling the transparent dark overlay of a material-ui dialog or modal? I'm using material-ui/React/Typescript. Instead of a transparent dark, I want it to be a transparent white. I'd prefer a JSS solution but an inline style is…
crownlessking
  • 1,182
  • 1
  • 17
  • 22
9
votes
2 answers

Fix Material-UI Right Side Persistent Drawer Animation

I have a fairly complex application with multiple drawers. I'm having an issue with the right side drawer animations. The drawers themselves animate fine, but the parent divs do not. I tried applying the same animation for the drawer to the parent…
Seth Duncan
  • 1,270
  • 2
  • 13
  • 20
9
votes
4 answers

How to override styles for material-ui TextField component without using the MUIThemeProvider?

How would I hide / remove the underline in a TextField component without using the following code: const theme = createMuiTheme({ overrides: { MuiInput: { underline: { '&:hover:not($disabled):before': { backgroundColor:…
Kevin Vugts
  • 1,462
  • 4
  • 21
  • 39
8
votes
2 answers

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 v5. MUI suggests to use sx prop instead. That's…
Ali Fayazi
  • 81
  • 1
  • 3
8
votes
1 answer

In Material UI what is the difference between a space after the ampersand and no space?

Can you please explain what is the difference between a space after the ampersand and no space e.g. Can you please explain why there is a space after the ampersand in & label.Mui-focused and no space in &.Mui-focused fieldset const…
breaktop
  • 1,899
  • 4
  • 37
  • 58
8
votes
1 answer

How to override style of nested Material UI component from the ancestors?

I am using a component from an external library that does not allow me to change much of its style, but I would like to change the style of a button that is a material ui button, when inspecting the element it clearly shows the classes…
Akira Kotsugai
  • 1,099
  • 3
  • 12
  • 19
8
votes
2 answers

how to specify grid-template with jss

Take a look at this example from css-tricks: .container { grid-template: [row1-start] "header header header" 25px [row1-end] [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto; } How can I reproduce this with jss?
Vegar
  • 12,828
  • 16
  • 85
  • 151
1 2
3
…
32 33